/* =========================================================================
   MOBILE RESPONSIVE OVERRIDES — Tribubet/GamifyJW
   =========================================================================
   Fix integral de UX/UI móvil. Se carga DESPUÉS de components.css y main.css
   para sobrescribir lo necesario sin modificar archivos base.

   Breakpoints:
   - tablet:        (max-width: 1024px)
   - mobile:        (max-width: 768px)
   - mobile-small:  (max-width: 480px)
   - landscape:     (max-width: 900px) and (orientation: landscape) and (max-height: 500px)

   Principios:
   - Touch targets mínimos 44×44px (WCAG)
   - No horizontal scroll
   - Padding consistente de 16px en mobile, 12px en small
   - Font-size mínimo 14px (legible en mobile)
   - Stack vertical para grids complejos
   - Sticky CTAs solo cuando aporten valor
   ========================================================================= */

/* === GLOBAL: prevenir horizontal scroll === */
@media (max-width: 768px) {
	html, body {
		overflow-x: hidden;
		max-width: 100vw;
		hyphens: none !important;
		-webkit-hyphens: none !important;
		-ms-hyphens: none !important;
	}
	* {
		max-width: 100vw;
	}
	img, video, iframe, table {
		max-width: 100% !important;
		height: auto;
	}
	.cp-container {
		padding-left: 16px !important;
		padding-right: 16px !important;
		max-width: 100% !important;
	}
}

@media (max-width: 480px) {
	.cp-container {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
}

/* === TIPOGRAFÍA RESPONSIVE === */
@media (max-width: 768px) {
	html { font-size: 15px; }
	h1, .cp-h1 { font-size: clamp(1.5rem, 6vw, 2rem) !important; line-height: 1.15 !important; }
	h2, .cp-h2 { font-size: clamp(1.3rem, 5vw, 1.75rem) !important; line-height: 1.2 !important; }
	h3, .cp-h3 { font-size: clamp(1.1rem, 4vw, 1.4rem) !important; line-height: 1.25 !important; }
	p, li { font-size: 0.95rem; line-height: 1.55; }
}

/* === HEADER MÓVIL === */
@media (max-width: 768px) {
	.cp-header-inner {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		gap: 8px !important;
		padding: 10px 0 !important;
		position: relative;
	}
	/* Reordenar: nav (con toggle) → logo → actions */
	.cp-header-inner > .cp-nav {
		order: 1 !important;
		flex: 0 0 auto !important;
		display: block !important;
	}
	.cp-header-inner > .cp-logo,
	.cp-header-inner > .cp-logo-wrap {
		order: 2 !important;
		flex: 1 1 auto !important;
		min-width: 0;
		text-align: left;
	}
	.cp-header-inner > .cp-header-actions,
	.cp-header-inner > .cp-header-right {
		order: 3 !important;
		flex: 0 0 auto !important;
		margin-left: auto;
	}

	/* Toggle: visible y compacto */
	.cp-nav-toggle {
		flex-shrink: 0;
		position: relative;
	}

	/* Menú dentro del nav: oculto por defecto, overlay al abrir */
	.cp-nav .cp-menu,
	.cp-nav #cp-primary-menu,
	.cp-nav [id^="cp-primary-menu"] {
		display: none;
	}

	.cp-logo {
		max-width: 130px;
		flex-shrink: 1;
		min-width: 0;
	}
	.cp-logo img,
	.cp-logo svg {
		max-width: 100%;
		height: auto;
		max-height: 50px;
	}
	.cp-header-actions,
	.cp-header-right {
		gap: 6px !important;
		display: flex;
		align-items: center;
	}
	/* Esconder textos largos en header en mobile */
	.cp-header-actions .cp-login-link-label,
	.cp-header-actions .cp-geo-bar-label,
	.cp-header-right .cp-login-link-label,
	.cp-header-right .cp-geo-bar-label {
		display: none;
	}
	/* Botones de header más compactos en mobile */
	.cp-header-actions .cp-btn,
	.cp-header-right .cp-btn,
	.cp-login-link {
		padding: 8px 12px !important;
		font-size: 0.78rem !important;
		min-height: 40px;
	}
	/* Geo-bar compacto */
	.cp-geo-bar {
		padding: 6px 8px !important;
		font-size: 0.75rem !important;
	}
	.cp-geo-bar-flag { font-size: 1rem; }

	/* Top-bar promo */
	.cp-topbar-cta {
		flex-direction: column;
		gap: 6px;
		text-align: center;
		font-size: 0.85rem;
		padding: 10px 12px !important;
	}
	.cp-topbar-cta .cp-btn {
		width: auto !important;
		padding: 6px 14px !important;
		font-size: 0.8rem !important;
	}

	/* Header centered: stack los niveles */
	.cp-header-centered .cp-header-inner {
		flex-wrap: wrap !important;
	}
	.cp-header-centered .cp-header-top {
		order: 0 !important;
		width: 100%;
		justify-content: space-between;
	}
	/* Header split: misma reorganización */
	.cp-header-split .cp-header-inner > .cp-logo-split {
		order: 2 !important;
	}
}
@media (max-width: 480px) {
	.cp-topbar-cta { display: none !important; }
	.cp-logo { max-width: 100px; }
	.cp-header-actions .cp-btn,
	.cp-header-right .cp-btn,
	.cp-login-link {
		padding: 7px 10px !important;
		font-size: 0.72rem !important;
		min-height: 38px;
	}
}

/* === MENÚ HAMBURGUESA — MEJORADO === */
@media (max-width: 900px) {
	.cp-nav-toggle {
		display: flex !important;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 5px;
		width: 44px;
		height: 44px;
		padding: 0;
		background: transparent;
		border: 1px solid rgba(245, 185, 66, 0.3);
		border-radius: 8px;
		cursor: pointer;
		position: relative;
		z-index: 1001;
	}
	.cp-nav-toggle span {
		display: block;
		width: 22px;
		height: 2px;
		background: var(--cp-text, #f5e8d3);
		border-radius: 2px;
		transition: all 0.3s ease;
		transform-origin: center;
	}
	.cp-nav-toggle[aria-expanded="true"] span:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}
	.cp-nav-toggle[aria-expanded="true"] span:nth-child(2) {
		opacity: 0;
		transform: scaleX(0);
	}
	.cp-nav-toggle[aria-expanded="true"] span:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}

	/* Menú overlay full-screen */
	.cp-nav .cp-menu,
	.cp-nav #cp-primary-menu {
		display: none;
		position: fixed;
		top: 0;
		right: 0;
		width: 100%;
		max-width: 320px;
		height: 100vh;
		height: 100dvh;
		background: var(--cp-surface, #1a1410);
		flex-direction: column;
		gap: 0;
		padding: 80px 24px 32px;
		margin: 0;
		list-style: none;
		box-shadow: -8px 0 32px rgba(0, 0, 0, 0.6);
		overflow-y: auto;
		z-index: 1000;
		border-left: 2px solid var(--cp-accent, #f5b942);
	}
	.cp-nav-toggle[aria-expanded="true"] ~ .cp-menu,
	.cp-nav-toggle[aria-expanded="true"] ~ #cp-primary-menu,
	.cp-nav.is-open .cp-menu,
	.cp-nav.is-open #cp-primary-menu {
		display: flex !important;
	}
	.cp-nav .cp-menu li,
	.cp-nav #cp-primary-menu li {
		width: 100%;
		border-bottom: 1px solid rgba(245, 232, 211, 0.08);
	}
	.cp-nav .cp-menu li:last-child,
	.cp-nav #cp-primary-menu li:last-child {
		border-bottom: none;
	}
	.cp-nav .cp-menu a,
	.cp-nav #cp-primary-menu a {
		display: block;
		padding: 14px 4px;
		color: var(--cp-text, #f5e8d3);
		text-decoration: none;
		font-weight: 600;
		font-size: 1rem;
		min-height: 44px;
		transition: color 0.15s, padding-left 0.15s;
	}
	.cp-nav .cp-menu a:hover,
	.cp-nav .cp-menu a:focus,
	.cp-nav #cp-primary-menu a:hover,
	.cp-nav #cp-primary-menu a:focus {
		color: var(--cp-accent, #f5b942);
		padding-left: 8px;
	}

	/* Backdrop cuando el menú está abierto */
	body.cp-menu-open::before {
		content: '';
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 999;
		backdrop-filter: blur(2px);
	}
	body.cp-menu-open {
		overflow: hidden;
	}
}

/* En desktop esconder el toggle */
@media (min-width: 901px) {
	.cp-nav-toggle { display: none; }
}

/* === HERO MÓVIL === */
@media (max-width: 768px) {
	.cp-hero,
	.cp-affhero,
	.cp-home-hero {
		padding: 32px 16px !important;
		min-height: auto !important;
		text-align: center !important;
	}
	.cp-hero h1,
	.cp-affhero h1,
	.cp-home-hero h1,
	.cp-affhero-title {
		font-size: clamp(1.4rem, 7vw, 2rem) !important;
		line-height: 1.15 !important;
		margin-bottom: 14px !important;
		letter-spacing: -0.5px !important;
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
		hyphens: none !important;
	}
	.cp-affhero-title-accent {
		display: block;
	}
	.cp-affhero-eyebrow {
		font-size: 0.7rem !important;
		letter-spacing: 1px !important;
		justify-content: center !important;
	}
	.cp-hero-sub,
	.cp-affhero-sub,
	.cp-home-hero-sub {
		font-size: 0.95rem !important;
		line-height: 1.5 !important;
		max-width: 100% !important;
	}
	.cp-hero-actions,
	.cp-affhero-actions,
	.cp-affhero-cta {
		flex-direction: column !important;
		gap: 10px !important;
		width: 100% !important;
		align-items: center !important;
		justify-content: center !important;
		display: flex !important;
		text-align: center !important;
	}
	.cp-hero-actions .cp-btn,
	.cp-affhero-actions .cp-btn,
	.cp-affhero-cta .cp-btn {
		width: 100% !important;
		max-width: 320px !important;
		justify-content: center !important;
		text-align: center !important;
		margin: 0 auto !important;
	}
	/* Stats hero: en grid de 3 (era horizontal apretado) */
	.cp-affhero-stats {
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 12px !important;
		justify-content: center !important;
		text-align: center !important;
	}
	.cp-affhero-stat-num {
		font-size: 1.6rem !important;
	}
	.cp-affhero-stat-label {
		font-size: 0.75rem !important;
	}
	.cp-affhero-copy {
		text-align: center !important;
	}
	.cp-affhero {
		grid-template-columns: 1fr !important;
	}
	.cp-affhero-media,
	.cp-affhero-image {
		display: none !important;
	}
}
@media (max-width: 380px) {
	.cp-hero h1,
	.cp-affhero h1,
	.cp-affhero-title {
		font-size: 1.3rem !important;
	}
	.cp-affhero-stats {
		grid-template-columns: 1fr !important;
	}
}

/* === BOTONES MÓVIL === */
@media (max-width: 768px) {
	.cp-btn {
		min-height: 44px;
		padding: 12px 20px;
		font-size: 0.95rem;
		display: inline-flex;
		align-items: center;
		justify-content: center !important;
		text-align: center !important;
	}
	.cp-btn-sm {
		min-height: 36px;
		padding: 8px 14px;
		font-size: 0.85rem;
	}
	.cp-btn-block-mobile,
	.cp-btn-full {
		width: 100% !important;
	}

	/* Wrappers de botones: forzar centro en TODOS los contextos comunes */
	.cp-empty-block,
	.cp-empty,
	.cp-cta-block,
	.cp-section-cta,
	.cp-bottom-cta,
	.cp-card-cta,
	.cp-block-cta {
		text-align: center !important;
	}

	/* Cualquier párrafo o div directo con un .cp-btn dentro: centrar */
	p:has(> .cp-btn:only-child),
	div:has(> .cp-btn:only-child) {
		text-align: center !important;
	}

	/* Lectura de "Leer review →" y similares centrados */
	.cp-casino-row-cta-link,
	.cp-section-link,
	.cp-card-link,
	.cp-thread-row-link,
	.cp-reclamo-card-link {
		text-align: center !important;
		display: block !important;
		margin: 8px auto 0 !important;
	}
}

/* === CARDS DE CASINO === */
@media (max-width: 768px) {
	/* Cards genéricas (front-page) */
	.cp-casino-card {
		flex-direction: column !important;
		grid-template-columns: 1fr !important;
		text-align: center;
		padding: 16px !important;
	}
	.cp-casino-card-logo {
		max-width: 100px;
		margin: 0 auto 12px;
	}
	.cp-casino-card-bonus {
		font-size: 0.95rem;
	}
	.cp-casino-card-rating {
		justify-content: center;
		margin: 8px 0;
	}
	.cp-casino-card-actions {
		width: 100%;
		flex-direction: column;
		gap: 8px;
	}
	.cp-casino-card-actions .cp-btn {
		width: 100%;
	}

	/* === ARCHIVE: cp-casino-row (la tabla principal de casinos) === */
	/* Ocultamos logo + rank en mobile, todo va al centro */
	.cp-casino-row {
		display: block !important;
		grid-template-columns: 1fr !important;
		padding: 16px !important;
		text-align: center !important;
		position: relative;
	}
	.cp-casino-row-rank {
		position: absolute !important;
		top: 8px !important;
		left: 8px !important;
		font-size: 0.85rem !important;
		opacity: 0.5;
		padding: 2px 8px !important;
		min-width: 0 !important;
	}
	.cp-casino-row-logo {
		display: none !important;
	}
	.cp-casino-row-info {
		text-align: center !important;
		margin-bottom: 12px;
	}
	.cp-casino-row-head {
		flex-direction: row !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 10px !important;
		flex-wrap: wrap !important;
		margin-bottom: 10px !important;
	}
	.cp-casino-row-title {
		margin: 0 !important;
		font-size: 1.15rem !important;
		text-align: center !important;
	}
	.cp-casino-row-features {
		text-align: left !important;
		display: inline-block !important;
		margin: 0 auto !important;
		padding: 0 !important;
		list-style: none !important;
		font-size: 0.85rem !important;
		line-height: 1.7 !important;
	}
	.cp-casino-row-features li {
		padding: 2px 0 !important;
	}
	.cp-casino-row-cta {
		width: 100% !important;
		flex-direction: column !important;
		gap: 10px !important;
		align-items: stretch !important;
	}
	.cp-casino-row-bonus {
		text-align: center !important;
		padding: 10px 12px !important;
	}
	.cp-casino-row-bonus small {
		display: block;
		font-size: 0.7rem !important;
		letter-spacing: 0.5px;
		margin-bottom: 4px;
	}
	.cp-casino-row-bonus strong {
		display: block;
		font-size: 0.9rem !important;
		line-height: 1.3 !important;
	}
	.cp-casino-row-cta-btn {
		width: 100% !important;
		justify-content: center !important;
	}
	.cp-casino-row-cta-link {
		text-align: center !important;
		display: block !important;
	}
	.cp-rating-pill {
		font-size: 0.8rem !important;
		padding: 4px 10px !important;
	}
}

/* Mobile pequeño: aún más compacto */
@media (max-width: 480px) {
	.cp-casino-row {
		padding: 14px 12px !important;
	}
	.cp-casino-row-features {
		font-size: 0.8rem !important;
	}
}

/* === SINGLE CASINO (review pages) === */
@media (max-width: 768px) {
	.cp-review-hero,
	.cp-review-header {
		grid-template-columns: 1fr !important;
		text-align: center;
		padding: 24px 16px !important;
	}
	.cp-review-hero-logo,
	.cp-review-header-logo {
		max-width: 160px;
		margin: 0 auto 16px;
	}
	.cp-quickstats,
	.cp-review-quickstats {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 8px !important;
	}
	.cp-quickstat,
	.cp-review-quickstat {
		padding: 12px 8px !important;
		font-size: 0.85rem;
	}
	.cp-quickstat-value {
		font-size: 1.1rem !important;
	}
	.cp-subratings,
	.cp-review-subratings {
		grid-template-columns: 1fr !important;
		gap: 8px !important;
	}
	.cp-pros-cons,
	.cp-review-pros-cons {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}
	.cp-info-table,
	.cp-review-info-table {
		font-size: 0.9rem;
	}
	.cp-info-table td,
	.cp-review-info-table td {
		padding: 8px !important;
	}
	.cp-bottom-cta {
		flex-direction: column;
		text-align: center;
		gap: 12px;
	}
}

/* === ARCHIVOS / LISTADOS === */
@media (max-width: 768px) {
	.cp-archive-header,
	.cp-archive-title-wrap,
	.cp-archive-head {
		text-align: center !important;
		padding: 24px 16px !important;
	}
	.cp-archive-head h1,
	.cp-archive-header h1 {
		font-size: clamp(1.3rem, 5.5vw, 1.8rem) !important;
		line-height: 1.15 !important;
		word-wrap: break-word !important;
		hyphens: none !important;
		text-align: center !important;
		margin: 0 0 12px 0 !important;
	}
	.cp-archive-head p,
	.cp-archive-header p {
		font-size: 0.92rem !important;
		text-align: center !important;
		margin: 0 auto !important;
		max-width: 100% !important;
	}
	.cp-archive-filters,
	.cp-filters {
		flex-wrap: wrap;
		gap: 8px;
		padding: 12px 0;
		justify-content: center;
	}
	.cp-filter-pill,
	.cp-filter-chip {
		font-size: 0.85rem;
		padding: 6px 12px;
	}
}

/* === HOME GRIDS: forzar 1 columna en mobile === */
@media (max-width: 768px) {
	/* "Últimos reclamos" + "Explora por categoría" estaban en 2 cols asimétricas */
	.cp-cols-2-asym,
	.cp-cols-2,
	.cp-cols-3,
	.cp-magazine,
	.cp-grid-2,
	.cp-grid-3,
	.cp-grid-4 {
		display: block !important;
		grid-template-columns: 1fr !important;
	}
	.cp-cols-2-asym > *,
	.cp-cols-2 > *,
	.cp-magazine > * {
		width: 100% !important;
		margin-bottom: 24px !important;
		min-width: 0 !important;
	}
	.cp-cols-2-asym > *:last-child,
	.cp-cols-2 > *:last-child {
		margin-bottom: 0 !important;
	}

	/* "Explora por categoría" - OCULTAR completamente en mobile (decisión de UX) */
	.cp-section-quick-stats {
		display: none !important;
	}

	/* Cards compactas de reclamos en home */
	.cp-reclamos-compact {
		display: flex !important;
		flex-direction: column !important;
		gap: 10px !important;
	}
	.cp-reclamo-compact-card {
		padding: 14px !important;
	}
	.cp-reclamo-compact-card h4 {
		font-size: 0.95rem !important;
		line-height: 1.3 !important;
		word-wrap: break-word !important;
		hyphens: none !important;
	}

	/* Section heads centrados */
	.cp-section-head {
		flex-direction: column !important;
		gap: 8px !important;
		text-align: center !important;
		align-items: center !important;
	}
	.cp-section-head h2 {
		text-align: center !important;
		font-size: clamp(1.2rem, 5vw, 1.6rem) !important;
		line-height: 1.2 !important;
	}
	.cp-section-link {
		align-self: center !important;
	}
}
@media (max-width: 380px) {
	/* "Explora por categoría" sigue oculta */
}

/* === RECLAMOS - SINGLE === */
@media (max-width: 768px) {
	.cp-reclamo-meta,
	.cp-reclamo-info {
		grid-template-columns: 1fr !important;
		gap: 12px !important;
	}
	.cp-reclamo-vote-box,
	.cp-vote-widget {
		flex-direction: column;
		gap: 8px;
		text-align: center;
		padding: 16px !important;
	}
	.cp-reclamo-section,
	.cp-reclamo-versions {
		padding: 16px !important;
	}
	.cp-status-banner,
	.cp-reclamo-status-banner {
		font-size: 0.95rem;
		padding: 12px 16px !important;
	}
}

/* === FORO / THREADS === */
@media (max-width: 768px) {
	.cp-thread-list-item,
	.cp-thread-row {
		flex-direction: column;
		gap: 8px;
		padding: 14px 12px !important;
	}
	.cp-thread-meta {
		flex-wrap: wrap;
		font-size: 0.8rem;
	}
	.cp-thread-replies-count {
		align-self: flex-start;
	}
}

/* === BIG WINS === */
@media (max-width: 768px) {
	.cp-bigwin-grid,
	.cp-bigwins-grid {
		grid-template-columns: 1fr !important;
		gap: 16px;
	}
	.cp-bigwin-card {
		padding: 14px !important;
	}
	.cp-bigwin-amount {
		font-size: 1.4rem !important;
	}
	.cp-bigwin-reactions {
		flex-wrap: wrap;
		gap: 6px;
	}
}

/* === FORMULARIOS === */
@media (max-width: 768px) {
	.cp-form,
	.cp-auth-form {
		padding: 0 !important;
	}
	.cp-form-row,
	.cp-form-group,
	.cp-auth-field {
		margin-bottom: 14px !important;
	}
	.cp-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
	.cp-form textarea,
	.cp-form select,
	.cp-auth-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
	.cp-auth-form textarea,
	.cp-auth-form select,
	input[type="text"],
	input[type="email"],
	input[type="password"],
	input[type="search"],
	input[type="url"],
	input[type="tel"],
	input[type="number"],
	textarea,
	select {
		width: 100% !important;
		min-height: 44px;
		padding: 12px 14px;
		font-size: 16px !important;  /* 16px previene zoom en iOS */
		border-radius: 8px;
		box-sizing: border-box;
	}
	textarea {
		min-height: 100px;
		line-height: 1.5;
	}
	.cp-form-row-2,
	.cp-form-row-3 {
		grid-template-columns: 1fr !important;
		gap: 0 !important;
	}

	/* === CHECKBOXES (incluye terms del registro y "mantener sesión" del login) === */
	.cp-checkbox-row,
	.cp-form-checkbox,
	.cp-auth-checkbox,
	label.cp-auth-checkbox,
	.cp-auth-row {
		display: flex !important;
		flex-direction: row !important;
		align-items: flex-start !important;
		gap: 12px !important;
		width: 100% !important;
		max-width: 100% !important;
		flex-wrap: nowrap !important;
		min-width: 0 !important;
	}
	.cp-checkbox-row input[type="checkbox"],
	.cp-form-checkbox input[type="checkbox"],
	.cp-auth-checkbox input[type="checkbox"],
	.cp-auth-row input[type="checkbox"] {
		width: 22px !important;
		min-width: 22px !important;
		max-width: 22px !important;
		height: 22px !important;
		min-height: 22px !important;
		max-height: 22px !important;
		flex: 0 0 22px !important;
		flex-shrink: 0 !important;
		margin: 2px 0 0 0 !important;
		padding: 0 !important;
	}
	.cp-checkbox-row span,
	.cp-form-checkbox span,
	.cp-auth-checkbox span,
	.cp-auth-row span,
	.cp-auth-row label {
		flex: 1 1 auto !important;
		min-width: 0 !important;
		font-size: 0.85rem !important;
		line-height: 1.45 !important;
		text-align: left !important;
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
		hyphens: none !important;
	}
	.cp-form-actions,
	.cp-auth-actions {
		flex-direction: column;
		gap: 10px;
	}
	.cp-form-actions button,
	.cp-form-actions .cp-btn,
	.cp-auth-actions button {
		width: 100% !important;
	}
}

/* === LOGIN/REGISTRO/RECUPERAR === */
@media (max-width: 768px) {
	.cp-auth-wrap {
		padding: 24px 12px !important;
		min-height: auto !important;
	}
	.cp-auth-card {
		padding: 28px 20px !important;
		max-width: 100%;
	}
	.cp-auth-decoration {
		display: none;
	}
	.cp-auth-title {
		font-size: 1.5rem !important;
	}
	.cp-auth-sub {
		font-size: 0.9rem !important;
	}
	.cp-auth-logo img {
		max-height: 50px;
	}
}

/* === FOOTER === */
@media (max-width: 768px) {
	.cp-footer {
		padding: 24px 0 12px !important;
	}
	/* Footer en 2 columnas (los textos son cortos) - más compacto que 1 col */
	.cp-footer-grid,
	.cp-footer-grid-3,
	.cp-footer-grid-4,
	.cp-footer-grid-5 {
		grid-template-columns: 1fr 1fr !important;
		gap: 20px 20px !important;
		text-align: left !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		box-sizing: border-box !important;
	}
	.cp-footer-col {
		min-width: 0 !important;
		text-align: left !important;
		padding-left: 4px !important;
	}
	.cp-footer-col h4 {
		margin: 0 0 8px 0 !important;
		font-size: 0.85rem !important;
		line-height: 1.2 !important;
		letter-spacing: 0.5px !important;
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
		hyphens: none !important;
	}
	.cp-footer-col p {
		font-size: 0.8rem !important;
		line-height: 1.4 !important;
		margin: 0 !important;
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
	}
	.cp-footer-col ul,
	.cp-footer-menu {
		display: flex !important;
		flex-direction: column !important;
		gap: 2px !important;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
	}
	.cp-footer-col li,
	.cp-footer-menu li {
		margin: 0 !important;
		padding: 0 !important;
	}
	.cp-footer-col a,
	.cp-footer-menu a {
		display: inline-block !important;
		padding: 3px 0 !important;
		font-size: 0.82rem !important;
		line-height: 1.3 !important;
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
		hyphens: none !important;
	}

	/* Primera columna ocupa ambas (descripción del sitio) */
	.cp-footer-grid > .cp-footer-col:first-child {
		grid-column: 1 / -1 !important;
		text-align: center !important;
		padding-bottom: 12px !important;
		border-bottom: 1px solid rgba(245, 232, 211, 0.08) !important;
		margin-bottom: 4px !important;
	}
	/* Newsletter (mega): también full-width */
	.cp-footer-newsletter {
		grid-column: 1 / -1 !important;
		text-align: center !important;
		padding-top: 12px !important;
		border-top: 1px solid rgba(245, 232, 211, 0.08) !important;
	}

	/* Footer bottom - copyright + disclaimer + banner +18 */
	.cp-footer-bottom {
		display: flex !important;
		flex-direction: column !important;
		gap: 14px !important;
		text-align: center !important;
		padding: 20px 16px !important;
		align-items: stretch !important;
	}
	/* Disclaimer (+18 informativo) */
	.cp-legal-disclaimer {
		font-size: 0.78rem !important;
		line-height: 1.5 !important;
		text-align: center !important;
		padding: 0 8px !important;
		max-width: 100% !important;
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
		hyphens: none !important;
	}
	/* Banner rojo "+18 Juega con responsabilidad" */
	.cp-responsible-banner {
		font-size: 0.85rem !important;
		line-height: 1.4 !important;
		padding: 10px 14px !important;
		text-align: center !important;
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
		hyphens: none !important;
		display: block !important;
	}
	.cp-responsible-banner .cp-tag-18,
	.cp-responsible-banner a {
		display: inline-block !important;
		margin: 0 4px !important;
	}
	.cp-tag-18 {
		padding: 2px 8px !important;
		border-radius: 4px !important;
		font-size: 0.78rem !important;
	}
	/* Credits stack vertical con espacio */
	.cp-footer-credits {
		display: flex !important;
		flex-direction: column !important;
		gap: 8px !important;
		text-align: center !important;
		align-items: center !important;
		margin-top: 4px !important;
	}
	.cp-footer-credits small {
		display: block !important;
		font-size: 0.72rem !important;
		line-height: 1.5 !important;
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
		hyphens: none !important;
		max-width: 100% !important;
		padding: 0 4px !important;
	}
	.cp-footer-credits a {
		word-break: keep-all !important;
		white-space: nowrap;
	}
	.cp-footer-social,
	.cp-social-links {
		justify-content: center !important;
		flex-wrap: wrap !important;
	}
	/* Footer minimal/centered */
	.cp-footer-minimal,
	.cp-footer-centered {
		flex-direction: column !important;
		gap: 12px !important;
		text-align: center !important;
		padding: 16px !important;
	}
	.cp-footer-menu-inline {
		flex-wrap: wrap !important;
		justify-content: center !important;
		gap: 8px 16px !important;
	}
}

@media (max-width: 480px) {
	.cp-footer-grid,
	.cp-footer-grid-3,
	.cp-footer-grid-4,
	.cp-footer-grid-5 {
		gap: 16px 12px !important;
	}
	.cp-footer-col h4 {
		font-size: 0.8rem !important;
	}
	.cp-footer-col a,
	.cp-footer-menu a {
		font-size: 0.78rem !important;
	}
}

/* === SLOGAN BAND === */
@media (max-width: 768px) {
	.cp-slogan-band {
		padding: 28px 16px !important;
		margin-top: 24px !important;
	}
	.cp-slogan-band-inner {
		flex-direction: column !important;
		gap: 8px !important;
		flex-wrap: wrap !important;
		text-align: center !important;
		max-width: 100% !important;
	}
	.cp-slogan-text {
		font-size: clamp(0.95rem, 4vw, 1.2rem) !important;
		line-height: 1.25 !important;
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
		hyphens: none !important;
		max-width: 100% !important;
		padding: 0 8px !important;
		text-align: center !important;
	}
	/* Diamantes ocultos en TODO mobile (no aportan, ocupan espacio) */
	.cp-slogan-leaf {
		display: none !important;
	}
}

/* === TRUST BADGES === */
@media (max-width: 768px) {
	.cp-trust-strip,
	.cp-trust-badges {
		grid-template-columns: 1fr 1fr !important;
		gap: 8px !important;
		padding: 16px !important;
	}
	.cp-trust-item {
		text-align: center;
		padding: 12px 8px !important;
		font-size: 0.85rem !important;
	}
	.cp-trust-item-label {
		font-size: 0.85rem !important;
	}
	.cp-trust-item-sub {
		font-size: 0.7rem !important;
	}
	.cp-trust-item-icon {
		font-size: 1.5rem !important;
	}
}
@media (max-width: 380px) {
	.cp-trust-strip,
	.cp-trust-badges {
		grid-template-columns: 1fr !important;
	}
}

/* === ADS / PLACEHOLDERS === */
@media (max-width: 768px) {
	.cp-ad-placeholder {
		max-width: 100% !important;
		margin: 12px auto !important;
	}
	.cp-ad-placeholder-cta {
		font-size: 0.7rem;
		padding: 4px 10px;
	}
}

/* === MOBILE STICKY AD - bottom of viewport === */
@media (max-width: 768px) {
	.cp-mobile-sticky-ad,
	.cp-ad-slot-mobile_sticky {
		position: fixed !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		z-index: 9997 !important;
		background: rgba(0, 0, 0, 0.95) !important;
		border-top: 1px solid rgba(245, 185, 66, 0.4) !important;
		max-width: 100vw !important;
		margin: 0 !important;
	}
	/* Padding bottom al body para que el sticky no tape contenido */
	body.has-mobile-sticky-ad {
		padding-bottom: 90px;
	}
}

/* === NOTIFICATIONS BELL === */
@media (max-width: 768px) {
	.cp-notif-dropdown {
		position: fixed !important;
		top: 60px !important;
		right: 8px !important;
		left: 8px !important;
		width: auto !important;
		max-height: 70vh;
		overflow-y: auto;
	}
	.cp-notif-item {
		padding: 12px;
		font-size: 0.9rem;
	}
}

/* === TABLES SCROLLABLE === */
@media (max-width: 768px) {
	.cp-table-wrap,
	.cp-scrollable-table {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		margin: 0 -16px;
		padding: 0 16px;
	}
	table.cp-comparison,
	table.cp-data-table {
		font-size: 0.85rem;
	}
	table.cp-comparison th,
	table.cp-comparison td,
	table.cp-data-table th,
	table.cp-data-table td {
		padding: 8px 6px !important;
		white-space: nowrap;
	}
}

/* === LEADERBOARD / TIKITOKENS === */
@media (max-width: 768px) {
	.cp-leaderboard-table,
	.cp-tt-table {
		font-size: 0.85rem;
	}
	.cp-leaderboard-row {
		grid-template-columns: 40px 1fr 70px !important;
		gap: 8px !important;
		padding: 10px 8px !important;
	}
	.cp-tt-balance-card {
		flex-direction: column;
		text-align: center;
		gap: 12px;
		padding: 20px 16px !important;
	}
	.cp-tt-balance-amount {
		font-size: 2.4rem !important;
	}
}

/* === ADMIN BAR (esconder en mobile) === */
@media (max-width: 600px) {
	html[lang] {
		margin-top: 0 !important;
	}
	#wpadminbar {
		position: fixed !important;
		top: 0 !important;
	}
}

/* === MENSAJES Y BANNERS === */
@media (max-width: 768px) {
	.cp-toast,
	.cp-notice {
		left: 12px !important;
		right: 12px !important;
		max-width: calc(100vw - 24px) !important;
		font-size: 0.9rem;
	}
	.cp-unverified-banner {
		font-size: 0.85rem;
		padding: 10px 12px !important;
	}
	.cp-unverified-banner-inner {
		flex-wrap: wrap;
		gap: 8px;
	}
	.cp-unverified-resend {
		font-size: 0.8rem;
	}
}

/* === SCROLL TO TOP === */
@media (max-width: 768px) {
	.cp-scroll-top,
	.cp-back-to-top {
		bottom: 80px !important; /* sobre el sticky ad si lo hay */
		right: 12px !important;
		width: 44px !important;
		height: 44px !important;
	}
}

/* === MISC: MEJORAS DE TOUCH === */
@media (max-width: 768px) {
	/* Aumentar tap targets para links inline */
	a {
		-webkit-tap-highlight-color: rgba(245, 185, 66, 0.2);
	}
	/* Inputs sin estilos nativos raros en iOS */
	input[type="text"],
	input[type="email"],
	input[type="password"],
	textarea {
		-webkit-appearance: none;
		appearance: none;
	}
	/* Search input lupa en iOS */
	input[type="search"] {
		-webkit-appearance: none;
		appearance: none;
	}
	/* Scroll suave */
	html {
		scroll-behavior: smooth;
		-webkit-text-size-adjust: 100%;
	}
}

/* === LANDSCAPE EN MOBILE === */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
	.cp-hero,
	.cp-affhero,
	.cp-home-hero {
		padding: 24px 16px !important;
		min-height: auto !important;
	}
	.cp-auth-wrap {
		padding: 12px !important;
		align-items: flex-start;
	}
	.cp-auth-card {
		padding: 20px !important;
	}
	.cp-mt-card,
	.cp-vr-card {
		padding: 28px 24px !important;
	}
	/* Menú overlay en landscape: full width */
	.cp-nav .cp-menu,
	.cp-nav #cp-primary-menu {
		max-width: 100% !important;
		padding: 60px 24px 24px !important;
	}
}

/* === DARK MODE / BG TRAMA: opacidad reducida en mobile === */
@media (max-width: 768px) {
	body::before {
		background-size: 200px 200px !important;
		opacity: 0.06 !important;
	}
}

/* === AD PRE-FOOTER (970x90) - bajar a tamaño mobile === */
@media (max-width: 768px) {
	.cp-ad-slot-footer_top,
	.cp-ad-slot-header_top,
	.cp-ad-slot-archive_top,
	.cp-ad-slot-single_top {
		max-width: 100% !important;
		aspect-ratio: auto !important;
		min-height: 100px;
		height: auto;
	}
}

/* === FIX: PREVENT TEXT OVERFLOW & UGLY HYPHENATION === */
@media (max-width: 768px) {
	/* hyphens: none EVITA cortes automáticos tipo "Promo-ción" */
	h1, h2, h3, h4, h5, h6,
	p, a, span, div, li, td, th, label, button {
		word-wrap: break-word;
		overflow-wrap: break-word;
		hyphens: none !important;
		-webkit-hyphens: none !important;
		-ms-hyphens: none !important;
	}
	/* Pero mantener overflow-wrap para palabras MUY largas (URLs, etc.) */
	a, code, pre {
		overflow-wrap: anywhere;
	}
	pre, code {
		max-width: 100%;
		overflow-x: auto;
		white-space: pre-wrap;
		word-wrap: break-word;
	}
}

/* === COMMENTS / RESPUESTAS === */
@media (max-width: 768px) {
	.cp-comment,
	.cp-reply {
		padding: 12px !important;
		margin-left: 0 !important;
	}
	.cp-comment-meta,
	.cp-reply-meta {
		flex-wrap: wrap;
		gap: 6px;
		font-size: 0.8rem;
	}
	.cp-comment .cp-reply,
	.cp-comment .cp-comment {
		margin-left: 16px !important;
	}
}

/* === MAINTENANCE/VERIFICATION PAGES === */
@media (max-width: 768px) {
	.cp-mt-card,
	.cp-vr-card {
		padding: 36px 20px !important;
		max-width: calc(100vw - 24px) !important;
	}
	.cp-mt-title,
	.cp-vr-title {
		font-size: 1.4rem !important;
	}
	.cp-mt-icon,
	.cp-vr-icon {
		font-size: 3rem !important;
	}
	.cp-mt-message,
	.cp-vr-body {
		font-size: 0.95rem !important;
	}
}