/*
 * CSS del CPT "chapas".
 * Reutiliza variables ya existentes del tema:
 *   --awb-color1 (blanco), --awb-color2 (gris claro), --awb-color5 (naranja acento), --site_width (ancho de contenedor).
 * Variables locales (no existen en el tema, usadas en 2+ sitios):
 *   --chapas-color-black: negro exacto del diseño (no coincide con los negros de Avada).
 *   --chapas-font-family: pila tipográfica usada en varios elementos del hero/formulario/tablas.
 *   --chapas-color-text-dark: gris oscuro de texto, usado en títulos de sección, tablas e inputs.
 *   --chapas-color-text-muted: gris medio, usado en labels del formulario y descripciones de sección.
 *   --chapas-color-border: gris claro de borde, usado en el input del formulario, tarjetas y tablas.
 * Los badges de color en tablas (BUENA/MEDIA/etc.) se escriben como HTML con estilo inline
 * directamente en el campo "Valor" de la celda, no vía clases CSS de este fichero.
 * No se aplica border-radius salvo que el diseño lo pida explícitamente.
 */

.chapas-single {
	--chapas-color-black: #1a1a1a;
	--chapas-font-family: 'Inter', system-ui, -apple-system, sans-serif;
	--chapas-color-text-dark: #2d2d2d;
	--chapas-color-text-muted: #6b6b6b;
	--chapas-color-border: #dcdcdc;
	overflow-x: hidden;
	min-width: 0;
	max-width: 100%;
}

.chapas-container {
	max-width: var(--site_width, 1170px);
	margin-inline: auto;
	padding-inline: 24px;
	min-width: 0;
}

/* Hero */

.chapas-hero {
	background: var(--chapas-color-black);
	color: var(--awb-color1);
	padding: 64px 0;
}

.chapas-hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}

@media ( min-width: 900px ) {
	.chapas-hero__grid {
		grid-template-columns: 1.4fr 1fr;
		align-items: start;
	}
}

.chapas-hero__badge {
	display: inline-block;
	background: var(--awb-color5);
	color: var(--awb-color1);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2.5px;
	padding: 5px 14px;
	margin-bottom: 22px;
	text-transform: uppercase;
}

.chapas-hero__title {
	font-family: var(--chapas-font-family);
	font-size: clamp( 40px, 6vw, 80px );
	font-weight: 900;
	color: var(--awb-color1);
	text-transform: uppercase;
	line-height: 0.9;
	margin: 0 0 10px;
	letter-spacing: -1px;
}

.chapas-hero__title > b {
	color: var(--awb-color5);
}

.chapas-hero__subtitle {
	color: #888;
	font-size: 12px;
	letter-spacing: 3px;
	text-transform: uppercase;
	margin: 0 0 22px;
}

.chapas-hero__description {
	color: #c8c8c8;
	font-size: 15px;
	line-height: 1.8;
	max-width: 500px;
	margin: 0 0 30px;
}

.chapas-hero__ctas {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 32px;
}

.chapas-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 28px;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 1.5px;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	font-family: var(--chapas-font-family);
}

.chapas-btn--primary {
	display: none;
	background: var(--awb-color5);
	color: var(--awb-color1);
	border: none;
}

.chapas-btn--secondary {
	display: none;
	background: transparent;
	color: var(--awb-color1);
	border: 2px solid rgba( 255, 255, 255, 0.35 );
}

@media ( max-width: 640px ) {
	.chapas-btn--primary,
	.chapas-btn--secondary {
		display: inline-flex;
	}
}

.chapas-grado {
	margin-bottom: 20px;
}

.chapas-grado__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 6px;
}

.chapas-grado__head > span {
	color: var(--awb-color5);
	font-weight: 700;
	font-size: 13px;
	white-space: nowrap;
	flex-shrink: 0;
}

.chapas-grado__bar {
	height: 5px;
	background: #333;
	border-radius: 3px;
	overflow: hidden;
	margin-bottom: 6px;
}

.chapas-grado__bar-fill {
	height: 100%;
	background: var(--awb-color5);
}

.chapas-grado__desc {
	color: #777;
	font-size: 12px;
	line-height: 1.6;
	margin: 0;
}

.chapas-grado__desc strong {
	color: var(--awb-color1);
	font-size: 14px;
	font-weight: 700;
	padding-right: 10px;
}

.chapas-hero__form-box {
	background: var(--awb-color1);
	color: var(--chapas-color-black);
}

.chapas-hero__form-header {
	background: var(--awb-color5);
	padding: 16px 24px;
}

.chapas-hero__form-header p {
	color: var(--awb-color1);
	font-weight: 700;
	font-size: 18px;
	margin: 0;
}

.chapas-hero__form {
	padding-block: 22px;
}

.chapas-hero__form label {
	display: block !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	color: var(--chapas-color-text-muted) !important;
	margin-bottom: 4px !important;
}

.chapas-hero__form input {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--chapas-color-border);
	font-size: 13px;
	font-family: var(--chapas-font-family);
	box-sizing: border-box;
	outline: none;
	color: var(--chapas-color-text-dark);
	background: var(--awb-color1) !important;
}

.chapas-hero__form button[type="submit"],
.chapas-hero__form input[type="submit"],
.chapas-hero__form .fusion-form-submit-button {
	background: var(--awb-color5);
	color: var(--awb-color1);
	border: none;
	padding: 13px;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 1.5px;
	cursor: pointer;
	text-transform: uppercase;
	font-family: var(--chapas-font-family);
	width: 100%;
}

.chapas-hero__form .fusion-form-form-wrapper .fusion-form-field {
	margin-block: 5px;
}

.chapas-hero__form .fusion-form-form-wrapper .fusion-form-field .fusion-form-input {
	max-height: 36px;
	background-color: var(--awb-color1);
	margin-inline: 0;
}

.chapas-hero__form .ProsemirrorEditor-list {
	padding-left: 10px;
}

.chapas-hero__form .ProsemirrorEditor-listItem {
	font-size: 13px;
}

.chapas-hero__form .fusion-builder-column-2 .fusion-column-wrapper {
	margin-left: calc( var(--awb-spacing-left) / 2 );
	margin-right: calc( var(--awb-spacing-left) / 2 );
}

.chapas-hero__form .fusion-builder-column-2.fusion_builder_column_1_2 {
	--awb-width-large: 100% !important;
	--awb-width-medium: 100% !important;
	--awb-width-small: 100% !important;
	width: 100% !important;
	flex-basis: 100% !important;
	max-width: 100% !important;
}

/* Barra de estadísticas */

.chapas-stats {
	background: var(--awb-color5);
}

.chapas-stats__list {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
}

.chapas-stats__list li {
	position: relative;
	flex: 1 1 140px;
	text-align: center;
	padding: 18px 16px;
}

.chapas-stats__list li:not( :last-child )::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: -8px;
	width: 1px;
	background: rgba( 255, 255, 255, 0.28 );
}

.chapas-stats__value {
	display: block;
	color: var(--awb-color1);
	font-family: var(--chapas-font-family);
	font-weight: 900;
	font-size: 28px;
	line-height: 1;
}

.chapas-stats__label {
	display: block;
	color: rgba( 255, 255, 255, 0.8 );
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-top: 4px;
}

/* Secciones genéricas */

.chapas-section {
	padding: 72px 0;
}

.chapas-section--alt {
	background: var(--awb-color2);
}

.chapas-section__eyebrow {
	display: block;
	text-align: center;
	color: var(--awb-color5);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.chapas-section__title {
	text-align: center;
	font-family: var(--chapas-font-family);
	font-size: clamp( 26px, 3.5vw, 40px );
	font-weight: 900;
	text-transform: uppercase;
	margin: 0;
	line-height: 1.05;
	color: var(--chapas-color-text-dark);
}

.chapas-section__title > b {
	color: var(--awb-color5);
}

.chapas-section__description {
	text-align: center;
	color: var(--chapas-color-text-muted);
	font-size: 15px;
	line-height: 1.75;
	max-width: 560px;
	margin: 14px auto 0;
}

/* Tarjetas (características / aplicaciones) */

.chapas-cards {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 24px;
}

@media ( max-width: 1024px ) {
	.chapas-cards {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 640px ) {
	.chapas-cards {
		grid-template-columns: 1fr;
	}
}

.chapas-card {
	background: var(--awb-color1);
	border: 1px solid var(--chapas-color-border);
	border-top: 3px solid var(--awb-color5);
	padding: 28px;
}

.chapas-card__icon {
	color: var(--awb-color5);
	margin-bottom: 16px;
}

.chapas-card__icon img {
	width: 40px;
	height: 40px;
}

.chapas-card__title {
	font-weight: 700;
	margin: 0 0 8px;
}

.chapas-card__description {
	font-size: 0.9rem;
	line-height: 1.6;
	margin: 0;
}

.chapas-app-card__title {
	font-weight: 700;
	margin: 0 0 12px;
	border-left: 3px solid var(--awb-color5);
	padding-left: 10px;
}

.chapas-app-card__list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.9rem;
	line-height: 1.7;
}

.chapas-app-card__list li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.chapas-app-card__bullet {
	color: var(--awb-color5);
	font-weight: 700;
	line-height: 20px;
	flex-shrink: 0;
}

/* Tablas comparativas */

.chapas-table-wrap {
	overflow-x: auto;
	margin-bottom: 40px;
	min-width: 0;
	max-width: 100%;
}

.chapas-table-title {
	font-weight: 700;
	margin: 0 0 12px;
	font-size: 1rem;
}

.chapas-table {
	width: 100%;
	min-width: 1024px;
	border-collapse: collapse;
}

.chapas-table thead th {
	padding: 14px 20px;
	color: var(--awb-color1);
	font-family: var(--chapas-font-family);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 1px;
}

.chapas-table thead th:first-child {
	background: var(--chapas-color-black);
	text-align: left;
}

.chapas-table thead th:not( :first-child ) {
	background: var(--awb-color5);
	text-align: center;
}

.chapas-table tbody td {
	padding: 12px 20px;
	border-bottom: 1px solid var(--chapas-color-border);
	color: var(--chapas-color-black);
	font-size: 13px;
}

.chapas-table tbody td:first-child {
	font-weight: 600;
}

.chapas-table tbody td:not( :first-child ) {
	text-align: center;
}

.chapas-table tbody tr:nth-child( odd ) {
	background: var(--awb-color1);
}

.chapas-table tbody tr:nth-child( even ) {
	background: #f6f6f6;
}

/* FAQ */

.chapas-faq {
	max-width: 840px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.chapas-faq details {
	background: var(--awb-color1);
	border: 1px solid var(--chapas-color-border);
}

.chapas-faq summary {
	width: 100%;
	padding: 16px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	gap: 12px;
	font-weight: 700;
	list-style: none;
}

.chapas-faq summary::-webkit-details-marker {
	display: none;
}

.chapas-faq details[open] summary {
	color: var(--chapas-color-black);
	border-bottom: 1px solid var(--chapas-color-border);
}

.chapas-faq__chevron {
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.chapas-faq details[open] .chapas-faq__chevron {
	transform: rotate( 180deg );
}

.chapas-faq__answer {
	color: var(--chapas-color-text-muted);
	font-size: 14px;
	line-height: 1.8;
	margin: 12px 0 0;
	padding: 0 20px 16px;
}