/* ============================================================
   CAMIONES HINO ARCHIVE + DETALLE — réplica del diseño React
   (CamionesHino.tsx + DetalleDutro.tsx)
   ============================================================ */

.ae-page-camiones-hino,
.ae-page-detalle-camion {
	--ch-red: #B81F2E;
	--ch-red-hover: #B91C1C;
	--ch-black: #1C1C1C;
	--ch-charcoal: #2A2A2A;
	--ch-gray-50: #f9fafb;
	--ch-gray-100: #f3f4f6;
	--ch-gray-200: #e5e7eb;
	--ch-gray-300: #d1d5db;
	--ch-gray-400: #9ca3af;
	--ch-gray-500: #6b7280;
	--ch-gray-600: #4b5563;
	--ch-gray-700: #374151;
	--ch-slate-50: #f8fafc;
	--ch-slate-100: #f1f5f9;
	--ch-slate-400: #94a3b8;
	--ch-slate-500: #64748b;
	--ch-slate-600: #475569;
	--ch-slate-900: #0f172a;
	background: #fff;
	color: var(--ch-black);
	font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
}

.ae-page-camiones-hino h1,
.ae-page-camiones-hino h2,
.ae-page-camiones-hino h3,
.ae-page-camiones-hino h4,
.ae-page-detalle-camion h1,
.ae-page-detalle-camion h2,
.ae-page-detalle-camion h3,
.ae-page-detalle-camion h4 {
	font-family: "Oswald", "Helvetica Neue", Arial, sans-serif;
	letter-spacing: -0.02em;
	margin: 0;
}

/* ============================================================
   ARCHIVE — HERO
   ============================================================ */

.ae-ch-hero {
	position: relative;
	height: 400px;
	display: flex;
	align-items: center;
	overflow: hidden;
}

@media (min-width: 768px) {
	.ae-ch-hero { height: 650px; }
}

.ae-ch-hero-bg,
.ae-ch-hero-bg img,
.ae-ch-hero-overlay,
.ae-ch-hero-gradient {
	position: absolute;
	inset: 0;
}

.ae-ch-hero-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.ae-ch-hero-overlay {
	background: linear-gradient(to bottom, rgba(42,42,42,0.9), rgba(42,42,42,0.6), transparent);
}

@media (min-width: 768px) {
	.ae-ch-hero-overlay {
		background: linear-gradient(to right, rgba(42,42,42,0.9), rgba(42,42,42,0.6), transparent);
	}
}

.ae-ch-hero-gradient {
	display: block;
	height: 33.333%;
	top: auto;
	background: linear-gradient(to top, rgba(42,42,42,0.4), transparent);
	pointer-events: none;
}

@media (min-width: 768px) {
	.ae-ch-hero-gradient { display: none; }
}

.ae-ch-hero-inner {
	position: relative;
	z-index: 10;
	max-width: 1280px;
}

.ae-ch-hero-content { max-width: 576px; }

.ae-ch-kicker {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 24px;
}

.ae-ch-kicker-line {
	display: block;
	width: 48px;
	height: 1px;
	background: var(--ch-red);
	flex-shrink: 0;
}

.ae-ch-kicker span {
	font-size: 10px;
	font-weight: 900;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.6);
}

.ae-ch-hero-title {
	font-size: 48px;
	font-weight: 900;
	line-height: 1.1;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 24px;
}

@media (min-width: 768px) { .ae-ch-hero-title { font-size: 72px; } }
@media (min-width: 1024px) { .ae-ch-hero-title { font-size: 88px; } }

.ae-ch-hero-subtitle {
	font-size: 18px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--ch-gray-300);
	max-width: 672px;
	margin: 0;
}

@media (min-width: 768px) { .ae-ch-hero-subtitle { font-size: 20px; } }

/* ============================================================
   ARCHIVE — GRID (tabs + cards)
   ============================================================ */

.ae-ch-grid-section {
	padding: 32px 0 64px;
	position: relative;
	z-index: 20;
}

/* Tabs: bg-white rounded-2xl shadow p-2 md:p-4 mb-16 border-gray-100 */
.ae-ch-tabs {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 20px 40px -15px rgba(0,0,0,0.1);
	border: 1px solid var(--ch-gray-100);
	padding: 8px;
	margin-bottom: 64px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

@media (min-width: 768px) {
	.ae-ch-tabs { padding: 16px; justify-content: flex-start; }
}

.ae-ch-tab {
	appearance: none;
	border: none;
	background: transparent;
	color: var(--ch-gray-500);
	font-family: "DM Sans", sans-serif;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	padding: 12px 24px;
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.3s ease;
}

@media (min-width: 768px) {
	.ae-ch-tab { padding: 16px 24px; }
}

.ae-ch-tab:hover { color: var(--ch-black); background: var(--ch-gray-100); }

.ae-ch-tab.is-active {
	background: var(--ch-black);
	color: #fff;
	box-shadow: 0 8px 16px -4px rgba(0,0,0,0.3);
}

/* Grid: grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 */
.ae-ch-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}

@media (min-width: 768px) {
	.ae-ch-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 40px; }
}

@media (min-width: 1024px) {
	.ae-ch-grid { grid-template-columns: repeat(3, 1fr); gap: 48px; }
}

/* Card: bg-white rounded-3xl border-gray-100 hover shadow */
.ae-ch-card {
	background: #fff;
	border: 1px solid var(--ch-gray-100);
	border-radius: 24px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.5s ease;
}

.ae-ch-card:hover {
	box-shadow: 0 40px 60px -15px rgba(0,0,0,0.1);
}

.ae-ch-card-image {
	position: relative;
	height: 256px;
	background: var(--ch-gray-100);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	transition: background 0.5s ease;
}

.ae-ch-card:hover .ae-ch-card-image { background: var(--ch-gray-100); }

.ae-ch-card-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	filter: drop-shadow(0 12px 16px rgba(0,0,0,0.1));
	transition: transform 0.5s ease;
}

.ae-ch-card:hover .ae-ch-card-image img {
	transform: scale(1.05) translateY(-8px);
}

.ae-ch-card-badges {
	position: absolute;
	top: 20px;
	left: 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ae-ch-card-badge {
	background: #fff;
	color: var(--ch-black);
	font-size: 9px;
	font-weight: 900;
	padding: 6px 12px;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	border-radius: 6px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
	border: 1px solid var(--ch-gray-100);
}

.ae-ch-card-body {
	padding: 32px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.ae-ch-card-info { flex: 1; margin-bottom: 24px; }

.ae-ch-card-title {
	font-size: 24px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	color: var(--ch-black);
	margin-bottom: 16px;
	transition: color 0.3s ease;
}

.ae-ch-card:hover .ae-ch-card-title { color: var(--ch-red); }

.ae-ch-card-price {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ae-ch-card-price-label {
	font-size: 10px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--ch-gray-500);
}

.ae-ch-card-price-value {
	font-size: 20px;
	font-weight: 900;
	letter-spacing: -0.01em;
	color: var(--ch-black);
}

.ae-ch-card-actions {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin-top: auto;
}

.ae-ch-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px 8px;
	border-radius: 12px;
	font-size: 10px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	text-decoration: none;
	transition: all 0.3s ease;
	text-align: center;
	cursor: pointer;
	border: none;
}

.ae-ch-btn--primary {
	background: var(--ch-red);
	color: #fff;
}

.ae-ch-btn--primary:hover,
.ae-ch-btn--primary:focus,
.ae-ch-btn--primary:active {
	background: var(--ch-black);
	color: #fff;
	transform: scale(1.02);
}

.ae-ch-btn--outline {
	background: transparent;
	border: 2px solid var(--ch-gray-100);
	color: var(--ch-black);
}

.ae-ch-btn--outline:hover {
	border-color: #25D366;
	color: #25D366;
	background: rgba(37,211,102,0.05);
}

/* ============================================================
   ARCHIVE — COTIZAR
   ============================================================ */

.ae-ch-cotizar {
	position: relative;
	background: var(--ch-charcoal);
	color: #fff;
	padding: 96px 0;
	overflow: hidden;
}

.ae-ch-cotizar-glow {
	position: absolute;
	top: 0;
	right: 0;
	width: 50%;
	height: 100%;
	background: linear-gradient(to left, rgba(220,38,38,0.1), transparent);
	pointer-events: none;
}

.ae-ch-cotizar-inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 64px;
}

@media (min-width: 1024px) {
	.ae-ch-cotizar-inner { flex-direction: row; gap: 64px; }
}

.ae-ch-cotizar-info { width: 100%; }

@media (min-width: 1024px) { .ae-ch-cotizar-info { width: 42%; } }

.ae-ch-cotizar-title {
	font-size: 40px;
	font-weight: 900;
	line-height: 1.1;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 24px;
}

@media (min-width: 768px) { .ae-ch-cotizar-title { font-size: 48px; } }

.ae-ch-cotizar-text {
	font-size: 18px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--ch-gray-400);
	margin-bottom: 40px;
}

.ae-ch-cotizar-contacts {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.ae-ch-cotizar-contact {
	display: flex;
	align-items: center;
	gap: 16px;
}

.ae-ch-cotizar-contact-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255,255,255,0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--ch-red);
}

.ae-ch-cotizar-contact-label {
	display: block;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--ch-gray-400);
	margin-bottom: 4px;
}

.ae-ch-cotizar-contact a {
	color: #fff;
	text-decoration: none;
	font-weight: 500;
}

.ae-ch-cotizar-form { width: 100%; }

@media (min-width: 1024px) { .ae-ch-cotizar-form { width: 58%; } }

.ae-ch-cotizar-card {
	background: #fff;
	border-radius: 16px;
	padding: 32px;
	position: relative;
	box-shadow: 0 30px 60px -20px rgba(0,0,0,0.4);
}

@media (min-width: 768px) { .ae-ch-cotizar-card { padding: 48px; } }

.ae-ch-cotizar-tag {
	position: absolute;
	top: -16px;
	right: -16px;
	background: var(--ch-red);
	color: #fff;
	font-size: 10px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	padding: 12px 24px;
	border-radius: 12px;
	box-shadow: 0 8px 16px -4px rgba(0,0,0,0.3);
	transform: rotate(3deg);
}

/* Formulario estilo Contacto (.ae-cta-form-*) dentro del card archive */
.ae-ch-cotizar-card .ae-cta-form-row { gap: 24px; }
.ae-ch-cotizar-card .ae-cta-form-row + .ae-cta-form-row {
	margin-top: 32px;
}
.ae-ch-cotizar-card .ae-cta-form-field { margin-top: 0; }
.ae-ch-cotizar-card .ae-cta-form-label,
.ae-ch-cotizar-card .ae-cta-form-col .ae-cta-form-label {
	color: var(--ch-gray-500);
	margin-bottom: 16px;
}
.ae-ch-cotizar-card .ae-cta-form-row { row-gap: 32px; }
.ae-ch-cotizar-card .ae-cta-form-legal { margin-top: 24px; }
.ae-ch-cotizar-card .ae-cta-form-submit { margin-top: 24px; }
.ae-ch-cotizar-card .ae-cta-form-submit .wpcf7-submit {
	width: 100%;
	justify-content: center;
}
.ae-ch-cotizar-card .wpcf7-form .wpcf7-not-valid-tip {
	font-size: 12px;
	color: #b81f2e;
	margin-top: 6px;
}
.ae-ch-cotizar-card .wpcf7-form .wpcf7-response-output {
	margin: 24px 0 0;
	border: none;
	border-left: 4px solid #b81f2e;
	padding: 12px 16px;
	background-color: #f8f6f3;
	border-radius: 8px;
	font-size: 14px;
	color: #1c1c1c;
}

/* Divider + boton WhatsApp (archive) */
.ae-ch-cotizar-card .ae-ch-form-wa-divider {
	text-align: center;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ch-gray-400);
	margin: 24px 0 16px;
}
.ae-ch-cotizar-card .ae-ch-form-wa-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	background: #25d366;
	color: #fff;
	padding: 16px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	text-decoration: none;
	box-shadow: 0 16px 32px -8px rgba(37,211,102,0.35);
	border-bottom: 4px solid rgba(0,0,0,0.1);
	transition: background 0.3s ease;
}
.ae-ch-cotizar-card .ae-ch-form-wa-btn:hover { background: #20be5c; color: #fff; }
.ae-ch-cotizar-card .ae-ch-form-wa-btn:active { border-bottom-width: 0; transform: translateY(4px); }

/* ============================================================
   DETALLE — BANNER ROJO
   ============================================================ */

.ae-cd-banner {
	background: var(--ch-red);
	color: #fff;
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid rgba(0,0,0,0.15);
}

.ae-cd-banner-inner {
	position: relative;
	z-index: 2;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	justify-content: space-between;
	align-items: center;
}

@media (min-width: 768px) {
	.ae-page-detalle-camion .ae-cd-banner-inner {
		flex-direction: row;
		padding: 16px 24px;
	}
}

.ae-cd-banner-left {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
}

.ae-cd-banner-tag {
	background: rgba(0,0,0,0.2);
	color: #fff;
	font-size: 10px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	padding: 4px 12px;
	border-radius: 6px;
}

.ae-cd-banner-text {
	font-size: 14px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

@media (min-width: 768px) { .ae-cd-banner-text { font-size: 16px; } }

.ae-cd-banner-phone {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #000;
	color: #fff;
	font-size: 12px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 10px 20px;
	border-radius: 12px;
	text-decoration: none;
	transition: background 0.3s ease;
}

.ae-cd-banner-phone:hover { background: #27272a; }

.ae-cd-banner-phone svg { color: var(--ch-red); }

.ae-cd-banner-skew {
	position: absolute;
	top: 0;
	right: 0;
	width: 33.333%;
	height: 100%;
	background: linear-gradient(to left, rgba(0,0,0,0.2), transparent);
	transform: skewX(12deg);
	transform-origin: top;
	pointer-events: none;
}

/* ============================================================
   DETALLE — BREADCRUMBS
   ============================================================ */

.ae-cd-breadcrumbs {
	background: #fff;
	border-bottom: 1px solid var(--ch-slate-100);
	padding: 16px 0;
}

.ae-cd-breadcrumbs .ae-section-inner {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 500;
	color: var(--ch-slate-500);
}

.ae-cd-breadcrumbs a {
	color: var(--ch-slate-500);
	text-decoration: none;
	transition: color 0.3s ease;
}

.ae-cd-breadcrumbs a:hover { color: var(--ch-red); }

.ae-cd-breadcrumbs span {
	color: var(--ch-slate-900);
	font-weight: 700;
	text-transform: uppercase;
}

/* ============================================================
   DETALLE — HERO
   ============================================================ */

.ae-cd-hero {
	background: #fff;
	padding: 48px 0;
	border-bottom: 1px solid var(--ch-slate-100);
}

@media (min-width: 768px) { .ae-cd-hero { padding: 80px 0; } }

.ae-cd-hero-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
	align-items: center;
}

@media (min-width: 1024px) {
	.ae-cd-hero-grid { grid-template-columns: repeat(12, 1fr); }
}

.ae-cd-hero-content {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

@media (min-width: 1024px) {
	.ae-cd-hero-content { grid-column: span 5; }
}

.ae-cd-hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	background: rgba(184,31,46,0.1);
	color: var(--ch-red);
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.15em;
}

.ae-cd-hero-title {
	font-size: 36px;
	font-weight: 900;
	text-transform: uppercase;
	line-height: 1.25;
	letter-spacing: -0.025em;
	color: var(--ch-black);
}

@media (min-width: 768px) { .ae-cd-hero-title { font-size: 48px; } }
@media (min-width: 1024px) { .ae-cd-hero-title { font-size: 60px; } }

.ae-cd-hero-tagline {
	font-size: 18px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--ch-slate-600);
	margin: 0;
}

.ae-cd-hero-specs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	padding-top: 16px;
}

.ae-cd-hero-spec {
	background: var(--ch-slate-50);
	border: 1px solid var(--ch-slate-100);
	border-radius: 16px;
	padding: 16px;
	text-align: center;
}

.ae-cd-hero-spec-label {
	display: block;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ch-slate-400);
	margin-bottom: 6px;
}

.ae-cd-hero-spec-value {
	display: block;
	font-size: 18px;
	font-weight: 900;
	color: var(--ch-black);
}

.ae-cd-hero-actions {
	padding-top: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

@media (min-width: 640px) { .ae-cd-hero-actions { flex-direction: row; } }

.ae-cd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 20px 40px;
	border-radius: 16px;
	font-size: 12px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	text-decoration: none;
	cursor: pointer;
	border: none;
	transition: all 0.3s ease;
}

.ae-cd-btn--primary {
	background: var(--ch-red);
	color: #fff;
	box-shadow: 0 20px 25px -5px rgba(184,31,46,0.2);
}

.ae-cd-btn--primary:hover,
.ae-cd-btn--primary:focus,
.ae-cd-btn--primary:active {
	background: #000;
	color: #fff;
}

.ae-cd-hero-image {
	display: flex;
	justify-content: center;
}

@media (min-width: 1024px) {
	.ae-cd-hero-image { grid-column: span 7; }
}

.ae-cd-hero-image-frame {
	position: relative;
	background: #EDE9E4;
	border-radius: 24px;
	border: 1px solid var(--ch-slate-100);
	box-shadow: 0 20px 50px rgba(0,0,0,0.03);
	padding: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	width: 100%;
}

@media (min-width: 768px) { .ae-cd-hero-image-frame { padding: 56px; } }

.ae-cd-hero-image-frame img {
	max-height: 380px;
	object-fit: contain;
	filter: drop-shadow(0 25px 25px rgba(0,0,0,0.15));
	transition: transform 0.5s ease;
}

@media (min-width: 768px) { .ae-cd-hero-image-frame img { max-height: 460px; } }

.ae-cd-hero-image-frame:hover img { transform: scale(1.02); }

/* ============================================================
   DETALLE — ESPECIFICACIONES (tabs)
   ============================================================ */

.ae-cd-specs-section {
	padding: 64px 0;
}

.ae-cd-section-title {
	font-size: 32px;
	font-weight: 900;
	text-transform: uppercase;
	text-align: center;
	margin-bottom: 48px;
	color: var(--ch-black);
}

@media (min-width: 768px) { .ae-cd-section-title { font-size: 36px; } }

.ae-cd-specs-card {
	background: #fff;
	border-radius: 24px;
	border: 1px solid var(--ch-slate-100);
	box-shadow: 0 10px 30px -10px rgba(0,0,0,0.08);
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
	.ae-cd-specs-card { grid-template-columns: repeat(12, 1fr); }
}

.ae-cd-specs-nav {
	background: var(--ch-slate-50);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	border-bottom: 1px solid var(--ch-slate-100);
}

@media (min-width: 1024px) {
	.ae-cd-specs-nav {
		grid-column: span 4;
		border-right: 1px solid var(--ch-slate-100);
		border-bottom: none;
		padding: 32px;
	}
}

.ae-cd-specs-tab {
	appearance: none;
	border: none;
	background: transparent;
	text-align: left;
	padding: 16px;
	border-radius: 16px;
	cursor: pointer;
	transition: all 0.3s ease;
	color: var(--ch-slate-600);
}

.ae-cd-specs-tab:hover {
	color: var(--ch-slate-900);
	background: rgba(241,245,249,0.7);
}

.ae-cd-specs-tab.is-active {
	background: #fff;
	border: 1px solid rgba(226,232,240,0.6);
	box-shadow: 0 4px 10px -2px rgba(0,0,0,0.08);
	color: var(--ch-red);
}

.ae-cd-specs-tab-label {
	display: block;
	font-size: 14px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.ae-cd-specs-tab-desc {
	display: block;
	font-size: 12px;
	font-weight: 500;
	color: var(--ch-slate-400);
	margin-top: 2px;
}

.ae-cd-specs-content {
	padding: 32px;
}

@media (min-width: 1024px) {
	.ae-cd-specs-content { grid-column: span 8; padding: 48px; }
}

.ae-cd-specs-panel { display: none; }

.ae-cd-specs-panel.is-active { display: block; }

.ae-cd-specs-panel-title {
	font-size: 20px;
	font-weight: 900;
	text-transform: uppercase;
	color: var(--ch-black);
	border-bottom: 1px solid var(--ch-slate-100);
	padding-bottom: 12px;
	margin-bottom: 24px;
}

.ae-cd-specs-rows {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

@media (min-width: 768px) {
	.ae-cd-specs-rows { grid-template-columns: 1fr 1fr; column-gap: 48px; }
}

.ae-cd-specs-row {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	border-bottom: 1px solid var(--ch-slate-100);
	padding: 14px 0;
	align-items: center;
}

.ae-cd-specs-row-label {
	grid-column: span 6;
	font-size: 13px;
	font-weight: 500;
	color: var(--ch-slate-500);
}

.ae-cd-specs-row-value {
	grid-column: span 6;
	font-size: 13px;
	font-weight: 800;
	color: #111111;
	padding-left: 16px;
}

/* ============================================================
   DETALLE — FEATURES (sección oscura)
   ============================================================ */

.ae-cd-features {
	background: var(--ch-charcoal);
	color: #fff;
	padding: 80px 0;
}

.ae-cd-features-head {
	text-align: center;
	margin-bottom: 56px;
}

.ae-cd-features-kicker {
	font-size: 10px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	color: var(--ch-red);
}

.ae-cd-features-title {
	font-size: 32px;
	font-weight: 900;
	text-transform: uppercase;
	color: #fff;
	margin-top: 12px;
}

@media (min-width: 768px) { .ae-cd-features-title { font-size: 48px; } }

.ae-cd-features-sub {
	font-size: 15px;
	font-weight: 300;
	color: var(--ch-gray-400);
	max-width: 576px;
	margin: 16px auto 0;
}

.ae-cd-features-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}

@media (min-width: 768px) {
	.ae-cd-features-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.ae-cd-features-grid { grid-template-columns: repeat(3, 1fr); }
}

.ae-cd-feature-card {
	background: rgba(255,255,255,0.05);
	border-radius: 24px;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,0.1);
	display: flex;
	flex-direction: column;
	transition: all 0.3s ease;
}

.ae-cd-feature-card:hover {
	border-color: rgba(255,255,255,0.2);
	box-shadow: 0 20px 40px -10px rgba(255,255,255,0.05);
}

.ae-cd-feature-image {
	position: relative;
	height: 224px;
	background: var(--ch-charcoal);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.ae-cd-feature-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, var(--ch-charcoal), rgba(42,42,42,0.2), transparent);
	z-index: 1;
	opacity: 0.6;
}

.ae-cd-feature-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.9;
	transition: transform 0.5s ease;
}

.ae-cd-feature-card:hover .ae-cd-feature-image img { transform: scale(1.05); }

.ae-cd-feature-zoom {
	position: absolute;
	bottom: 16px;
	right: 16px;
	z-index: 2;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255,255,255,0.1);
	border: 1px solid rgba(255,255,255,0.1);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.3s ease;
}

.ae-cd-feature-zoom:hover { background: rgba(255,255,255,0.2); }

.ae-cd-feature-body {
	padding: 32px;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.ae-cd-feature-title {
	font-size: 20px;
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 12px;
}

.ae-cd-feature-desc {
	font-size: 14px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--ch-gray-400);
	margin-bottom: 24px;
}

.ae-cd-feature-footer {
	border-top: 1px solid rgba(255,255,255,0.1);
	padding-top: 16px;
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ae-cd-feature-footer-tag {
	font-size: 9px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgba(255,255,255,0.3);
}

.ae-cd-feature-view {
	appearance: none;
	border: none;
	background: transparent;
	color: rgba(255,255,255,0.5);
	font-size: 12px;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	transition: color 0.3s ease;
}

.ae-cd-feature-view:hover { color: #fff; }

/* ============================================================
   DETALLE — LIGHTBOX
   ============================================================ */

.ae-cd-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.ae-cd-lightbox-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.9);
}

.ae-cd-lightbox-content {
	position: relative;
	z-index: 2;
	background: var(--ch-charcoal);
	border-radius: 24px;
	max-width: 896px;
	width: 100%;
	border: 1px solid rgba(255,255,255,0.1);
	box-shadow: 0 30px 60px rgba(0,0,0,0.5);
	overflow: hidden;
}

.ae-cd-lightbox-close {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 3;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(255,255,255,0.1);
	border: 1px solid rgba(255,255,255,0.1);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 18px;
	transition: background 0.3s ease;
}

.ae-cd-lightbox-close:hover { background: rgba(255,255,255,0.2); }

.ae-cd-lightbox-stage {
	padding: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ch-charcoal);
	min-height: 300px;
}

.ae-cd-lightbox-stage img {
	max-height: 70vh;
	max-width: 100%;
	object-fit: contain;
	border-radius: 16px;
	box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
}

.ae-cd-lightbox-footer {
	padding: 20px 32px;
	border-top: 1px solid rgba(255,255,255,0.1);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ae-cd-lightbox-footer span {
	font-size: 12px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: rgba(255,255,255,0.4);
}

.ae-cd-lightbox-footer button {
	appearance: none;
	border: none;
	background: transparent;
	color: rgba(255,255,255,0.5);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	cursor: pointer;
	transition: color 0.3s ease;
}

.ae-cd-lightbox-footer button:hover { color: #fff; }

/* ============================================================
   DETALLE — COTIZAR
   ============================================================ */

.ae-cd-cotizar {
	position: relative;
	background: var(--ch-charcoal);
	color: #fff;
	padding: 96px 0;
	overflow: hidden;
}

.ae-cd-cotizar-glow {
	position: absolute;
	top: 0;
	right: 0;
	width: 50%;
	height: 100%;
	background: linear-gradient(to left, rgba(220,38,38,0.1), transparent);
	pointer-events: none;
}

.ae-cd-cotizar-inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 64px;
}

@media (min-width: 1024px) {
	.ae-cd-cotizar-inner { flex-direction: row; gap: 64px; }
}

.ae-cd-cotizar-info { width: 100%; }

@media (min-width: 1024px) { .ae-cd-cotizar-info { width: 42%; } }

.ae-cd-cotizar-badge {
	display: inline-flex;
	align-items: center;
	background: rgba(184,31,46,0.2);
	border: 1px solid rgba(184,31,46,0.3);
	color: var(--ch-red);
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	margin-bottom: 24px;
}

.ae-cd-cotizar-title {
	font-size: 40px;
	font-weight: 900;
	line-height: 1.1;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 24px;
}

@media (min-width: 768px) { .ae-cd-cotizar-title { font-size: 48px; } }

.ae-cd-cotizar-text {
	font-size: 18px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--ch-gray-400);
	margin-bottom: 40px;
}

.ae-cd-cotizar-text strong { color: #fff; }

.ae-cd-cotizar-contacts {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.ae-cd-cotizar-contact {
	display: flex;
	align-items: center;
	gap: 16px;
}

.ae-cd-cotizar-contact-icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(255,255,255,0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--ch-red);
}

.ae-cd-cotizar-contact-label {
	display: block;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--ch-gray-400);
	margin-bottom: 4px;
}

.ae-cd-cotizar-contact span:last-child {
	font-weight: 600;
	color: #fff;
}

.ae-cd-cotizar-form { width: 100%; }

@media (min-width: 1024px) { .ae-cd-cotizar-form { width: 58%; } }

.ae-cd-cotizar-card {
	background: #fff;
	border-radius: 24px;
	padding: 32px;
	position: relative;
	border: 1px solid var(--ch-slate-100);
	box-shadow: 0 30px 60px -20px rgba(0,0,0,0.4);
}

@media (min-width: 768px) { .ae-cd-cotizar-card { padding: 48px; } }

.ae-cd-cotizar-tag {
	position: absolute;
	top: -16px;
	right: -16px;
	background: var(--ch-red);
	color: #fff;
	font-size: 10px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	padding: 12px 24px;
	border-radius: 12px;
	box-shadow: 0 8px 16px -4px rgba(0,0,0,0.3);
	transform: rotate(2deg);
}

.ae-cd-cotizar-card-title {
	font-size: 18px;
	font-weight: 900;
	text-transform: uppercase;
	color: var(--ch-black);
	border-bottom: 1px solid var(--ch-slate-100);
	padding-bottom: 12px;
	margin-bottom: 24px;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Formulario estilo Contacto (.ae-cta-form-*) dentro del card detalle */
.ae-cd-cotizar-card .ae-cta-form-row { gap: 24px; }
.ae-cd-cotizar-card .ae-cta-form-row + .ae-cta-form-row {
	margin-top: 32px;
}
.ae-cd-cotizar-card .ae-cta-form-field { margin-top: 0; }
.ae-cd-cotizar-card .ae-cta-form-label,
.ae-cd-cotizar-card .ae-cta-form-col .ae-cta-form-label {
	color: var(--ch-gray-500);
	margin-bottom: 16px;
}
.ae-cd-cotizar-card .ae-cta-form-row { row-gap: 32px; }
.ae-cd-cotizar-card .ae-cta-form-legal { margin-top: 24px; }
.ae-cd-cotizar-card .ae-cta-form-submit { margin-top: 24px; }
.ae-cd-cotizar-card .ae-cta-form-submit .wpcf7-submit {
	width: 100%;
	justify-content: center;
}
.ae-cd-cotizar-card .wpcf7-form .wpcf7-not-valid-tip {
	font-size: 12px;
	color: #b81f2e;
	margin-top: 6px;
}
.ae-cd-cotizar-card .wpcf7-form .wpcf7-response-output {
	margin: 24px 0 0;
	border: none;
	border-left: 4px solid #b81f2e;
	padding: 12px 16px;
	background-color: #f8f6f3;
	border-radius: 8px;
	font-size: 14px;
	color: #1c1c1c;
}

/* Divider + boton WhatsApp (detalle) */
.ae-cd-cotizar-card .ae-ch-form-wa-divider {
	text-align: center;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ch-gray-400);
	margin: 24px 0 16px;
}
.ae-cd-cotizar-card .ae-ch-form-wa-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	background: #25d366;
	color: #fff;
	padding: 16px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	text-decoration: none;
	box-shadow: 0 16px 32px -8px rgba(37,211,102,0.35);
	border-bottom: 4px solid rgba(0,0,0,0.1);
	transition: background 0.3s ease;
}
.ae-cd-cotizar-card .ae-ch-form-wa-btn:hover { background: #20be5c; color: #fff; }
.ae-cd-cotizar-card .ae-ch-form-wa-btn:active { border-bottom-width: 0; transform: translateY(4px); }

/* ============================================================
   ARCHIVE - Card: imagen link + overlay "Ver Ficha" + titulo link
   ============================================================ */
/* Hero: separacion titulo -> subtitulo (la regla h1 { margin: 0 } del page lo pisa) */
.ae-ch-hero .ae-ch-hero-title {
	margin-bottom: 32px;
}
/* Grid: mas aire en el top */
.ae-ch-grid-section {
	padding-top: 60px;
}
@media (min-width: 768px) {
	.ae-ch-grid-section { padding-top: 60px; }
}
.ae-ch-card-image-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	position: relative;
	text-decoration: none;
}
.ae-ch-card-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.05);
	opacity: 0;
	transition: opacity 0.3s ease;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	z-index: 2;
}
.ae-ch-card-image-link:hover .ae-ch-card-overlay {
	opacity: 1;
}
.ae-ch-card-overlay > span {
	background: rgba(255,255,255,0.95);
	color: var(--ch-black);
	font-size: 10px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	padding: 10px 16px;
	border-radius: 12px;
	box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}
.ae-ch-card-title a {
	color: inherit;
	text-decoration: none;
}
.ae-ch-card-title a:hover { color: var(--ch-red); }

/* ============================================================
   Fix reset.css: botones de camiones pisados por [type=button]
   ============================================================ */
.ae-ch-tabs .ae-ch-tab,
.ae-cd-specs-nav .ae-cd-specs-tab {
	font-weight: 900;
}
.ae-ch-tabs .ae-ch-tab {
	padding: 12px 24px;
	color: var(--ch-gray-500);
}
.ae-ch-tabs .ae-ch-tab.is-active {
	color: #fff;
}
.ae-cd-specs-nav .ae-cd-specs-tab {
	padding: 16px;
}
.ae-cd-feature-image .ae-cd-feature-zoom {
	width: 40px;
	height: 40px;
	padding: 0;
	background: rgba(255,255,255,0.1);
	color: #fff;
}
.ae-cd-feature-body .ae-cd-feature-view {
	color: rgba(255,255,255,0.5);
}
.ae-cd-lightbox-content .ae-cd-lightbox-close {
	width: 48px;
	height: 48px;
	padding: 0;
}

/* Especificaciones: espacio del titulo (48px como React mb-12) */
.ae-cd-specs-section .ae-cd-section-title {
	margin-bottom: 48px;
}

/* Tabs specs: hover y estados protegidos del reset */
.ae-cd-specs-nav .ae-cd-specs-tab.is-active {
	color: var(--ch-red);
	background: #fff;
}
.ae-cd-specs-nav .ae-cd-specs-tab.is-active:hover,
.ae-cd-specs-nav .ae-cd-specs-tab.is-active:focus,
.ae-cd-specs-nav .ae-cd-specs-tab.is-active:active {
	color: var(--ch-red);
	background: #fff;
}
.ae-cd-specs-nav .ae-cd-specs-tab:not(.is-active):hover,
.ae-cd-specs-nav .ae-cd-specs-tab:not(.is-active):focus,
.ae-cd-specs-nav .ae-cd-specs-tab:not(.is-active):active {
	color: var(--ch-slate-900);
	background: rgba(241,245,249,0.7);
}

/* Specs tabs: scroll horizontal en tablet y mobile si sobrepasan el viewport */
@media (max-width: 1023px) {
	.ae-cd-specs-nav {
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.ae-cd-specs-nav::-webkit-scrollbar {
		display: none;
	}
	.ae-cd-specs-tab {
		flex-shrink: 0;
		white-space: nowrap;
	}
}

/* Cotizar: separacion titulo -> texto (24px como React mb-6) */
.ae-cd-cotizar .ae-cd-cotizar-title {
	margin-bottom: 24px;
}

/* Cotizar: separacion titulo del card -> labels (16px + pb 12px) */
.ae-cd-cotizar-card .ae-cd-cotizar-card-title {
	margin-bottom: 16px;
}