/*
Theme Name: Transmisiones Panamericana
Template: twentytwentyfive
Description: Tema hijo mobile-first para Transmisiones Panamericana (catálogo WooCommerce).
Author: BConverse Consulting
Version: 1.0.5
Text Domain: tp
*/

/* ---------- Base (mobile first) ---------- */
html { scroll-behavior: smooth; }
body { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
img { max-width: 100%; height: auto; }
:where(a, button, input, select, textarea):focus-visible { outline: 3px solid var(--wp--preset--color--gold); outline-offset: 2px; }
.tp-accent { color: var(--wp--preset--color--gold); }
.tp-hidden { display: none !important; }

.tp-eyebrow {
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
	font-size: .9rem; color: var(--wp--preset--color--gold); margin: 0;
}
.tp-eyebrow--dark { color: var(--wp--preset--color--gold-dark); }

/* Buttons shared by templates + shortcodes: big tap targets */
.tp-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	min-height: 48px; padding: .75rem 1.25rem; border-radius: 6px;
	font-family: var(--wp--preset--font-family--barlow-condensed); font-weight: 700;
	font-size: 1.125rem; text-transform: uppercase; text-decoration: none; letter-spacing: .03em;
}
.tp-btn--wa { background: #25D366; color: #fff !important; }
.tp-btn--wa:hover { background: #1da851; }
.tp-btn--call { background: var(--wp--preset--color--blue); color: #fff !important; }
.tp-btn--call:hover { background: var(--wp--preset--color--blue-dark); }
.wp-element-button, .wp-block-button__link { min-height: 48px; }

/* ---------- Top bar + header ---------- */
.tp-topbar__inner { margin: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; justify-content: center; align-items: center; font-size: 1rem; line-height: 1.5; }
.tp-topbar__inner a { display: inline-flex; align-items: center; min-height: 36px; font-size: 1.0625rem; }
.tp-topbar a { color: var(--wp--preset--color--gold-light, #FFD055); text-decoration: none; font-weight: 600; }
.tp-topbar__addr, .tp-topbar__hours { display: none; }
.tp-header { position: sticky; top: 0; z-index: 50; box-shadow: 0 2px 10px rgba(13, 34, 96, .08); }
.tp-logo img { display: block; height: 48px; width: auto; }
.tp-header .wp-block-navigation__responsive-container-open svg { width: 32px; height: 32px; }
.tp-header .wp-block-navigation__responsive-container.is-menu-open { padding: 1.5rem; }
.tp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { font-size: 1.5rem; }

/* ---------- Hero ---------- */
.tp-hero h1 { margin-block: .5rem 1rem; }
.tp-hero .wp-block-buttons { gap: .75rem; }
.tp-hero .wp-block-button { flex: 1 1 100%; }
.tp-hero .wp-block-button__link { width: 100%; }
.tp-btn-wa .wp-block-button__link { border-color: #25D366 !important; color: #fff !important; background: #25D366 !important; }
.tp-hero-search { margin-top: 1.5rem; }
.tp-hero-search .wp-block-search__input { min-height: 52px; font-size: 1rem; border-radius: 6px 0 0 6px; border: 0; padding-inline: 1rem; }
.tp-hero-search .wp-block-search__button { min-width: 56px; background: var(--wp--preset--color--gold); color: var(--wp--preset--color--blue-dark); border-radius: 0 6px 6px 0; margin-left: 0; }
.tp-hero-search .wp-block-search__inside-wrapper { border: 0; padding: 0; }

/* ---------- Category cards ---------- */
.tp-cats { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.tp-cats a {
	display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit;
	background: #fff; border: 1px solid #E3E7F0; border-radius: 10px; overflow: hidden;
	transition: transform .15s ease, box-shadow .15s ease;
}
.tp-cats a:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(13, 34, 96, .12); }
.tp-cats img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; background: var(--wp--preset--color--off-white); }
.tp-cats__ph { aspect-ratio: 4 / 3; display: grid; place-items: center; font-size: 2.5rem; background: var(--wp--preset--color--off-white); }
.tp-cats__name { font-family: var(--wp--preset--font-family--barlow-condensed); font-weight: 700; font-size: 1.2rem; text-transform: uppercase; color: var(--wp--preset--color--blue-dark); padding: .6rem .75rem 0; }
.tp-cats__count { font-size: .85rem; color: var(--wp--preset--color--muted); padding: 0 .75rem .75rem; }

/* ---------- Chips (transmisión / marca) ---------- */
.tp-chips-label { font-weight: 600; margin: 1rem 0 .5rem; color: var(--wp--preset--color--muted); text-transform: uppercase; font-size: .85rem; letter-spacing: .06em; }
.tp-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.tp-chips a {
	display: inline-flex; align-items: center; min-height: 44px; padding: .4rem 1rem;
	border: 2px solid var(--wp--preset--color--blue); border-radius: 999px; background: #fff;
	color: var(--wp--preset--color--blue); font-weight: 600; text-decoration: none;
}
.tp-chips a:hover { background: var(--wp--preset--color--blue); color: #fff; }

/* ---------- Product grids ---------- */
.tp-grid .wc-block-product-template { gap: 1rem; }
.tp-grid .wc-block-components-product-image img,
.tp-grid .wp-block-woocommerce-product-image img { aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; background: var(--wp--preset--color--off-white); }
.tp-grid .wp-block-post-title { font-family: var(--wp--preset--font-family--barlow); font-weight: 600; text-transform: none; font-size: 1rem !important; line-height: 1.3; margin-block: .5rem; }
.tp-grid .wp-block-post-title a { color: var(--wp--preset--color--ink); text-decoration: none; }
.tp-grid .tp-whatsapp { width: 100%; }
@media (max-width: 599px) {
	.tp-grid .wc-block-product-template { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; display: grid !important; }
	.tp-grid .wc-block-product-template > li { width: auto !important; margin: 0 !important; }
}

/* ---------- Why us ---------- */
.tp-why { display: grid; gap: 1rem; margin-top: 1.5rem; }
.tp-why > div { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; padding: 1.25rem; }
.tp-why h3 { color: var(--wp--preset--color--gold); margin: .25rem 0 .5rem; }
.tp-why p { margin: 0; }
.tp-why__icon { font-size: 2rem; }

/* ---------- Contact ---------- */
.tp-contact { display: grid; gap: 1.5rem; margin-top: 1rem; }
.tp-contact__big { display: flex; flex-wrap: wrap; gap: .75rem; }
.tp-contact__big .tp-btn { flex: 1 1 auto; }
.tp-contact address { font-style: normal; }
.tp-hours { border-collapse: collapse; width: 100%; max-width: 360px; }
.tp-hours th, .tp-hours td { text-align: left; padding: .35rem 0; border-bottom: 1px solid #E3E7F0; }
.tp-hours th { font-weight: 500; }
.tp-contact__map iframe { width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: 10px; background: var(--wp--preset--color--off-white); }
.tp-form { margin-top: 2rem; background: var(--wp--preset--color--off-white); border-radius: 10px; padding: 1.25rem; display: grid; gap: .25rem 1rem; }
.tp-form h3 { margin: 0 0 .5rem; }
.tp-form label { display: block; font-weight: 600; margin-bottom: .25rem; }
.tp-form input, .tp-form textarea { width: 100%; min-height: 48px; font-size: 1rem; padding: .6rem .75rem; border: 1px solid #C9D0DE; border-radius: 6px; background: #fff; }
.tp-form p { margin: 0 0 .5rem; }

/* ---------- Shop / filters ---------- */
.tp-shop { display: grid; gap: 1rem; }
.tp-term-intro { color: var(--wp--preset--color--muted); max-width: 70ch; }
.tp-filters h3 { margin: 1rem 0 .25rem; text-transform: uppercase; }

/* ---------- Single product ---------- */
.tp-product .wp-block-post-title { margin-top: 0; }
.tp-stock { display: inline-block; background: #E8F7EE; color: #11793A; font-weight: 600; border-radius: 999px; padding: .25rem .75rem; margin: 0 0 .75rem; }
.tp-ficha__cta { display: flex; flex-wrap: wrap; gap: .75rem; }
.tp-ficha__cta .tp-btn--wa { flex: 1 1 100%; }
.tp-ficha__cta .tp-btn--call { flex: 1 1 100%; }
.tp-specs { width: 100%; border-collapse: collapse; margin: 1.25rem 0; }
.tp-specs th, .tp-specs td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid #E3E7F0; vertical-align: top; }
.tp-specs th { width: 35%; color: var(--wp--preset--color--muted); font-weight: 500; }
.tp-ficha__tip { background: var(--wp--preset--color--off-white); border-left: 4px solid var(--wp--preset--color--gold); padding: .75rem 1rem; border-radius: 4px; }
.related.products { margin-top: var(--wp--preset--spacing--50); }
.related.products ul.products { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.related.products ul.products::before { display: none; }
.related.products ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; }
.related.products img { aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; }
.related.products .woocommerce-loop-product__title { font-size: 1rem !important; font-family: var(--wp--preset--font-family--barlow); font-weight: 600; text-transform: none; }

/* ---------- Footer ---------- */
.tp-footer a { color: var(--wp--preset--color--gold); }
.tp-footer__grid { display: grid; gap: 1.5rem; }
.tp-footer__brand { font-family: var(--wp--preset--font-family--barlow-condensed); font-weight: 900; font-size: 1.6rem; text-transform: uppercase; margin: 0 0 .5rem; }
.tp-footer__h { font-family: var(--wp--preset--font-family--barlow-condensed); font-weight: 700; text-transform: uppercase; color: var(--wp--preset--color--gold); margin: 0 0 .35rem; }
.tp-footer address { font-style: normal; }
.tp-footer__legal { margin-top: 2rem; font-size: .85rem; opacity: .7; }

/* ---------- Floating WhatsApp ---------- */
.tp-wa-float {
	position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 100;
	display: inline-flex; align-items: center; gap: .5rem; height: 56px; padding: 0 18px 0 14px;
	border-radius: 999px; background: #25D366; color: #fff; text-decoration: none; font-weight: 700;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}
.tp-wa-float:hover { background: #1da851; color: #fff; }
.tp-wa-float span { display: none; }

/* ---------- ≥ 600px ---------- */
@media (min-width: 600px) {
	.tp-cats { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
	.tp-why { grid-template-columns: repeat(2, 1fr); }
	.tp-hero .wp-block-button { flex: 0 0 auto; }
	.tp-hero .wp-block-button__link { width: auto; }
	.tp-ficha__cta .tp-btn--wa { flex: 2 1 0; }
	.tp-ficha__cta .tp-btn--call { flex: 1 1 0; }
	.tp-form { grid-template-columns: repeat(3, 1fr); }
	.tp-form h3, .tp-form__full { grid-column: 1 / -1; }
	.tp-footer__grid { grid-template-columns: repeat(2, 1fr); }
	.tp-wa-float span { display: inline; }
	.related.products ul.products { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- ≥ 960px ---------- */
@media (min-width: 960px) {
	.tp-topbar__inner { justify-content: space-between; }
	.tp-topbar__addr, .tp-topbar__hours { display: inline; }
	.tp-topbar__inner { font-size: 1.0625rem; }
	.tp-logo img { height: 64px; }
	.tp-cats { grid-template-columns: repeat(5, 1fr); }
	.tp-why { grid-template-columns: repeat(4, 1fr); }
	.tp-contact { grid-template-columns: 1fr 1.2fr; align-items: start; }
	.tp-shop { grid-template-columns: 260px 1fr; gap: 2rem; align-items: start; }
	.tp-filters { position: sticky; top: 100px; }
	.tp-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.4fr; }
}

/* ---------- Legibility on navy: explicit colors (do not inherit parent theme) ---------- */
.tp-topbar, .tp-topbar p, .tp-topbar span,
.tp-footer, .tp-footer p, .tp-footer address, .tp-footer li, .tp-footer td, .tp-footer th { color: #FFFFFF !important; }
.tp-topbar__addr, .tp-topbar__hours { color: rgba(255, 255, 255, .88) !important; }
.tp-footer__brand { color: #FFFFFF !important; }
.tp-footer p.tp-footer__h, .tp-footer__h { color: var(--wp--preset--color--gold) !important; }
.tp-footer a, .tp-topbar a { color: #FFD055 !important; }
.tp-footer a:hover, .tp-topbar a:hover { color: #FFFFFF !important; }
.tp-footer__legal { color: rgba(255, 255, 255, .75) !important; opacity: 1; }
.has-blue-dark-background-color :where(h1, h2, h3, h4, p, li, address, td, th),
.has-hero-gradient-background :where(h1, h2, h3, h4, p, li) { color: inherit; }
.has-blue-dark-background-color, .has-hero-gradient-background { color: #FFFFFF; }

/* Sorting select: full-size tap target */
.woocommerce-ordering select, .wc-block-catalog-sorting select { min-height: 44px; font-size: 1rem; padding: .4rem .75rem; border: 1px solid #C9D0DE; border-radius: 6px; background: #fff; }

/* Footer credit: own line on phones, right-aligned on desktop */
.tp-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; }
.tp-footer__credit a { color: #FFD055 !important; }

.tp-form__consent { font-size: .9rem; color: var(--wp--preset--color--muted); }
.tp-form__error { background: #FDECEC; color: #9B1C1C; border-left: 4px solid #D93025; padding: .75rem 1rem; border-radius: 4px; }
.tp-form input, .tp-form textarea { box-sizing: border-box; }

/* Category cards: fixed 3:4 frame (Safari-safe), full photo incl. Ale's labels; counts aligned */
.tp-cats a { display: grid; grid-template-rows: auto 1fr auto; }
.tp-cats__img { display: block; position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--wp--preset--color--off-white); }
.tp-cats__img img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.tp-cats__img .tp-cats__ph { position: absolute; inset: 0; aspect-ratio: auto; }
.tp-cats__name { align-self: start; line-height: 1.15; font-size: 1.1rem; }
@media (min-width: 600px) { .tp-cats__name { font-size: 1.2rem; } }