/* ==========================================================================
   TFA Móviles y Tecnología — estilos principales
   ========================================================================== */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--tfa-negro);
	color: var(--tfa-gris-claro);
	font-family: var(--tfa-font-texto);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5 {
	font-family: var(--tfa-font-titulos);
	font-weight: 700;
	color: var(--tfa-blanco);
	line-height: 1.2;
	margin: 0 0 .5em;
}
h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; }

.tfa-container {
	max-width: var(--tfa-max-width);
	margin: 0 auto;
	padding: 0 24px;
}

.tfa-skip-link {
	position: absolute;
	left: -999px;
	top: 0;
	background: var(--tfa-azul);
	color: #fff;
	padding: 10px 16px;
	z-index: 999;
}
.tfa-skip-link:focus { left: 10px; top: 10px; }

/* ---------- Botones ---------- */
.tfa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 26px;
	border-radius: var(--tfa-radius);
	font-weight: 600;
	font-size: .95rem;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.tfa-btn:hover { transform: translateY(-2px); }
.tfa-btn-primary { background: var(--tfa-azul); color: #fff; }
.tfa-btn-primary:hover { background: #1d4fd1; }
.tfa-btn-outline { border-color: var(--tfa-gris); color: var(--tfa-gris-claro); }
.tfa-btn-outline:hover { border-color: var(--tfa-azul); color: var(--tfa-azul); }

/* ---------- Header ---------- */
.tfa-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(11, 15, 20, .92);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.tfa-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 14px 24px;
}
.tfa-logo { display: flex; align-items: baseline; gap: 8px; }
.tfa-logo-text { font-family: var(--tfa-font-titulos); font-weight: 800; font-size: 1.5rem; color: #fff; }
.tfa-logo-accent { color: var(--tfa-azul); }
.tfa-logo-sub { font-size: .75rem; color: var(--tfa-gris); text-transform: uppercase; letter-spacing: .05em; }

.tfa-nav-list {
	display: flex;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.tfa-nav-list a {
	font-weight: 500;
	font-size: .95rem;
	color: var(--tfa-gris-claro);
	transition: color .15s ease;
}
.tfa-nav-list a:hover { color: var(--tfa-azul); }

.tfa-header-actions { display: flex; align-items: center; gap: 18px; }
.tfa-social-header { display: flex; gap: 10px; }
.tfa-social-icon {
	display: inline-flex;
	width: 34px;
	height: 34px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, .06);
	color: var(--tfa-gris-claro);
	transition: background .15s ease, color .15s ease;
}
.tfa-social-icon:hover { background: var(--tfa-azul); color: #fff; }

.tfa-cart-icon { position: relative; display: inline-flex; color: var(--tfa-gris-claro); }
.tfa-cart-count {
	position: absolute;
	top: -8px;
	right: -10px;
	background: var(--tfa-azul);
	color: #fff;
	font-size: .65rem;
	font-weight: 700;
	border-radius: 50%;
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tfa-menu-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 6px;
}
.tfa-menu-toggle span { width: 24px; height: 2px; background: #fff; border-radius: 2px; }

/* ---------- Hero ---------- */
.tfa-hero { padding: 80px 0 60px; overflow: hidden; }
.tfa-hero-inner {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 40px;
	align-items: center;
}
.tfa-eyebrow {
	display: inline-block;
	color: var(--tfa-azul);
	font-weight: 600;
	font-size: .85rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin-bottom: 14px;
}
.tfa-hero-text p { color: var(--tfa-gris); font-size: 1.05rem; max-width: 480px; }
.tfa-hero-cta { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.tfa-hero-media {
	aspect-ratio: 4/3;
	border-radius: 20px;
	background:
		radial-gradient(circle at 30% 30%, rgba(37, 99, 235, .35), transparent 60%),
		linear-gradient(135deg, var(--tfa-azul-oscuro), var(--tfa-negro));
	border: 1px solid rgba(37, 99, 235, .25);
}

/* ---------- Secciones genéricas ---------- */
.tfa-section { padding: 60px 0; }
.tfa-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 28px;
}
.tfa-link-more { color: var(--tfa-azul); font-weight: 600; font-size: .9rem; }

/* ---------- Productos (WooCommerce) ---------- */
.tfa-products-grid, .woocommerce ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 22px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.tfa-product-card, .woocommerce ul.products li.product {
	background: var(--tfa-azul-oscuro);
	border: 1px solid rgba(255, 255, 255, .06);
	border-radius: var(--tfa-radius);
	padding: 18px;
	transition: transform .15s ease, border-color .15s ease;
}
.tfa-product-card:hover, .woocommerce ul.products li.product:hover {
	transform: translateY(-4px);
	border-color: var(--tfa-azul);
}
.tfa-product-thumb img, .woocommerce ul.products li.product img {
	border-radius: 8px;
	margin-bottom: 12px;
	background: #0f1620;
}
.tfa-product-price, .woocommerce ul.products li.product .price {
	color: var(--tfa-azul) !important;
	font-weight: 700;
}
.woocommerce ul.products li.product .price ins { color: var(--tfa-azul); text-decoration: none; }
.woocommerce ul.products li.product .price del { color: var(--tfa-gris); }

.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce-page a.button {
	background: var(--tfa-azul) !important;
	color: #fff !important;
	border-radius: var(--tfa-radius) !important;
	border: none !important;
	font-weight: 600 !important;
	padding: 12px 22px !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover {
	background: #1d4fd1 !important;
}

.woocommerce div.product .woocommerce-tabs, .woocommerce table.shop_table,
.woocommerce-cart table.cart, .woocommerce-checkout table.shop_table {
	background: var(--tfa-azul-oscuro);
	border-radius: var(--tfa-radius);
	color: var(--tfa-gris-claro);
}
.woocommerce input[type="text"], .woocommerce input[type="email"], .woocommerce input[type="tel"],
.woocommerce input[type="number"], .woocommerce input[type="password"], .woocommerce textarea, .woocommerce select {
	background: var(--tfa-negro);
	border: 1px solid rgba(255, 255, 255, .12);
	color: var(--tfa-gris-claro);
	border-radius: 6px;
	padding: 10px 12px;
}

/* ---------- Blog / comparativas ---------- */
.tfa-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.tfa-blog-card {
	background: var(--tfa-azul-oscuro);
	border: 1px solid rgba(255, 255, 255, .06);
	border-radius: var(--tfa-radius);
	overflow: hidden;
	transition: transform .15s ease, border-color .15s ease;
}
.tfa-blog-card:hover { transform: translateY(-4px); border-color: var(--tfa-azul); }
.tfa-blog-thumb { aspect-ratio: 16/10; background: #0f1620; overflow: hidden; }
.tfa-blog-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tfa-blog-card h3, .tfa-blog-card p { padding: 0 18px; }
.tfa-blog-card h3 { margin-top: 16px; }
.tfa-blog-card p { color: var(--tfa-gris); font-size: .92rem; padding-bottom: 18px; }

/* ---------- YouTube ---------- */
.tfa-youtube-inner {
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	gap: 40px;
	align-items: center;
}
.tfa-youtube-embed { aspect-ratio: 16/9; border-radius: var(--tfa-radius); overflow: hidden; background: #000; }
.tfa-youtube-embed iframe { width: 100%; height: 100%; border: 0; }

/* ---------- Redes sociales (tiles) ---------- */
.tfa-social-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
.tfa-social-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30px 18px;
	border-radius: var(--tfa-radius);
	background: var(--tfa-azul-oscuro);
	border: 1px solid rgba(255, 255, 255, .06);
	font-weight: 700;
	font-family: var(--tfa-font-titulos);
	color: var(--tfa-blanco);
	transition: border-color .15s ease, color .15s ease;
}
.tfa-social-tile:hover { border-color: var(--tfa-azul); color: var(--tfa-azul); }

/* ---------- Valores ---------- */
.tfa-values-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	padding: 40px 24px;
	background: var(--tfa-azul-oscuro);
	border-radius: 16px;
}
.tfa-value h4 { color: var(--tfa-azul); margin-bottom: 6px; }
.tfa-value p { color: var(--tfa-gris); font-size: .9rem; margin: 0; }

/* ---------- Entradas individuales ---------- */
.tfa-page-wrap { padding: 60px 0; }
.tfa-page-narrow { max-width: 820px; }
.tfa-single-meta { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.tfa-single-cat {
	background: var(--tfa-azul);
	color: #fff;
	font-size: .75rem;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 20px;
	text-transform: uppercase;
}
.tfa-single-date { color: var(--tfa-gris); font-size: .85rem; }
.tfa-single-thumb { margin: 24px 0; border-radius: var(--tfa-radius); overflow: hidden; }
.tfa-content { font-size: 1.05rem; }
.tfa-content h2, .tfa-content h3 { margin-top: 1.5em; }
.tfa-content img { border-radius: var(--tfa-radius); }
.tfa-content a { color: var(--tfa-azul); text-decoration: underline; }

.tfa-afiliado-card {
	background: var(--tfa-azul-oscuro);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: var(--tfa-radius);
	padding: 20px;
	align-items: center;
	margin: 2em 0;
}
.tfa-afiliado-img img { border-radius: 8px; width: 140px; }
.tfa-btn-amazon .wp-block-button__link {
	background: var(--tfa-azul) !important;
	border-radius: var(--tfa-radius) !important;
}

.tfa-disclosure, .tfa-disclosure-footer {
	font-size: .8rem;
	color: var(--tfa-gris);
	border-top: 1px solid rgba(255, 255, 255, .08);
	padding-top: 14px;
	margin-top: 30px;
}

.tfa-tags { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.tfa-tags a { color: var(--tfa-azul); font-size: .85rem; }

.tfa-pagination ul { display: flex; gap: 8px; list-style: none; padding: 0; margin: 40px 0 0; justify-content: center; }
.tfa-pagination a, .tfa-pagination span {
	display: inline-flex;
	min-width: 38px;
	height: 38px;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: var(--tfa-azul-oscuro);
	color: var(--tfa-gris-claro);
}
.tfa-pagination .current { background: var(--tfa-azul); color: #fff; }

/* ---------- Sobre nosotros ---------- */
.tfa-about-header { text-align: center; max-width: 640px; margin: 0 auto 30px; }
.tfa-about-values { margin: 50px 0; }
.tfa-about-cta { display: flex; gap: 14px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }

/* ---------- Contacto ---------- */
.tfa-contact-grid {
	display: grid;
	grid-template-columns: .8fr 1.2fr;
	gap: 40px;
	margin-top: 50px;
	align-items: start;
}
.tfa-contact-list { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.tfa-contact-list a { color: var(--tfa-azul); }
.tfa-contact-note { font-size: .8rem; color: var(--tfa-gris); font-style: italic; }

.tfa-contact-form-wrap {
	background: var(--tfa-azul-oscuro);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: var(--tfa-radius);
	padding: 30px;
}
.tfa-form-row { margin-bottom: 18px; display: flex; flex-direction: column; gap: 6px; }
.tfa-form-row label { font-size: .88rem; font-weight: 600; color: var(--tfa-gris-claro); }
.tfa-form-row input, .tfa-form-row textarea {
	background: var(--tfa-negro);
	border: 1px solid rgba(255, 255, 255, .12);
	color: var(--tfa-gris-claro);
	border-radius: 8px;
	padding: 12px 14px;
	font-family: var(--tfa-font-texto);
	font-size: .95rem;
}
.tfa-form-row input:focus, .tfa-form-row textarea:focus {
	outline: none;
	border-color: var(--tfa-azul);
}
.tfa-form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tfa-form-message {
	padding: 14px 16px;
	border-radius: 8px;
	margin-bottom: 20px;
	font-size: .9rem;
}
.tfa-form-success { background: rgba(37, 99, 235, .15); border: 1px solid var(--tfa-azul); color: var(--tfa-gris-claro); }
.tfa-form-error { background: rgba(220, 38, 38, .12); border: 1px solid #dc2626; color: var(--tfa-gris-claro); }

@media (max-width: 720px) {
	.tfa-contact-grid { grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */
.tfa-footer { background: var(--tfa-azul-oscuro); margin-top: 60px; padding-top: 50px; border-top: 1px solid rgba(255, 255, 255, .06); }
.tfa-footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 40px;
	padding-bottom: 40px;
}
.tfa-footer-col h4 { color: var(--tfa-blanco); margin-bottom: 16px; font-size: 1rem; }
.tfa-footer-brand p { color: var(--tfa-gris); font-size: .9rem; margin: 14px 0; }
.tfa-footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tfa-footer-links a { color: var(--tfa-gris-claro); font-size: .92rem; }
.tfa-footer-links a:hover { color: var(--tfa-azul); }
.tfa-footer-values { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; color: var(--tfa-gris); font-size: .88rem; }
.tfa-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, .06);
	padding: 20px 24px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	color: var(--tfa-gris);
	font-size: .8rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
	.tfa-hero-inner, .tfa-youtube-inner { grid-template-columns: 1fr; }
	.tfa-hero-media { order: -1; }
	.tfa-products-grid, .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; }
	.tfa-blog-grid { grid-template-columns: repeat(2, 1fr); }
	.tfa-social-grid, .tfa-values-grid { grid-template-columns: repeat(2, 1fr); }
	.tfa-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
	.tfa-nav { position: fixed; inset: 68px 0 0 0; background: var(--tfa-negro); padding: 30px 24px; transform: translateX(100%); transition: transform .2s ease; }
	.tfa-nav.is-open { transform: translateX(0); }
	.tfa-nav-list { flex-direction: column; gap: 20px; }
	.tfa-menu-toggle { display: flex; }
	.tfa-social-header { display: none; }
	.tfa-products-grid, .woocommerce ul.products, .tfa-blog-grid, .tfa-social-grid, .tfa-values-grid { grid-template-columns: 1fr !important; }
	.tfa-footer-grid { grid-template-columns: 1fr; }
}