/* Sistema compartido por las páginas interiores (todo lo que no es Home).
   Reutiliza tokens y patrones ya establecidos — nada de sombras, radios
   grandes ni gradientes; separación por líneas finas y tipografía. */

/* Hero de página interior */

.page-hero {
	padding-block: var(--space-12) var(--space-8);
	max-width: 900px;
}

.page-hero__title {
	font-size: var(--text-h1);
	margin-bottom: var(--space-3);
}

.page-hero__title .accent {
	color: var(--color-accent-text);
}

.page-hero__text {
	font-size: var(--text-lead);
	max-width: 60ch;
	margin-bottom: var(--space-4);
}

.page-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

/* Breadcrumbs */

.breadcrumbs {
	padding-top: var(--space-4);
}

.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	font-size: 0.8rem;
	color: var(--color-text-muted);
}

.breadcrumbs__item:not(:last-child)::after {
	content: "/";
	margin-left: var(--space-1);
	color: var(--color-light-gray);
}

.breadcrumbs__item a {
	color: var(--color-text-muted);
}

.breadcrumbs__item a:hover {
	color: var(--color-accent-text);
}

.breadcrumbs__item [aria-current="page"] {
	color: var(--color-text);
}

/* Secciones de contenido genéricas (Soluciones, Para empresas, Nosotros) */

.content-section {
	padding-block: var(--space-12);
	border-top: 1px solid var(--color-border);
}

.content-section__grid {
	display: grid;
	gap: var(--space-6);
	align-items: center;
}

@media (min-width: 1024px) {
	.content-section__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-8);
	}

	.content-section__grid--reverse .content-section__media {
		order: -1;
	}
}

.content-section__eyebrow {
	margin-bottom: var(--space-1);
}

.content-section__title {
	font-size: var(--text-h2);
	max-width: 16ch;
	margin-bottom: var(--space-3);
}

.content-section__body p {
	margin-bottom: var(--space-2);
}

.content-section__list {
	display: grid;
	gap: var(--space-1);
	margin-top: var(--space-3);
}

.content-section__list li {
	position: relative;
	padding-left: 1.25em;
	color: var(--color-text-muted);
}

.content-section__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 6px;
	height: 6px;
	background: var(--color-accent);
}

/* Marco de medios: sustituye fotografía/render real que todavía no existe.
   Deliberadamente abstracto (nunca una foto de stock falsa). */

.media-frame {
	position: relative;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--color-border);
	background:
		linear-gradient(135deg, transparent 48%, var(--color-border) 49%, var(--color-border) 51%, transparent 52%),
		var(--color-surface);
	display: flex;
	align-items: center;
	justify-content: center;
}

.media-frame--small {
	max-width: 240px;
	aspect-ratio: 1;
	margin-bottom: var(--space-4);
}

/* Cuando el frame ya tiene una foto real en vez del placeholder rayado,
   la imagen cubre el marco entero — el fondo/patrón de .media-frame queda
   detrás, sin efecto visible, así que no hace falta una clase aparte. */
.media-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.media-frame__label {
	font-family: var(--font-display);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-muted);
	background: var(--color-bg);
	padding: var(--space-1) var(--space-2);
	border: 1px solid var(--color-border);
}

/* Transición de estado (wireframe -> modelo -> pieza / genérico -> marca) */

.stage-transition--inline {
	margin-top: var(--space-3);
}

.stage-transition {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: var(--space-2);
	align-items: center;
}

@media (min-width: 640px) {
	.stage-transition {
		grid-template-columns: 1fr auto 1fr auto 1fr;
	}
}

.stage-transition__stage {
	aspect-ratio: 1;
	border: 1px solid var(--color-border);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--space-2);
}

.stage-transition__stage span {
	font-family: var(--font-display);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text-muted);
}

.stage-transition__stage:last-child span {
	color: var(--color-accent-text);
}

.stage-transition__arrow {
	display: none;
	color: var(--color-light-gray);
}

@media (min-width: 640px) {
	.stage-transition__arrow {
		display: block;
	}
}

/* Grid editorial (Casos, Blog) — tamaños desiguales a propósito, no cards
   idénticas. */

.editorial-grid {
	display: grid;
	gap: var(--space-4);
}

@media (min-width: 1024px) {
	.editorial-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.editorial-grid__item--featured {
		grid-column: 1 / -1;
	}

	.editorial-grid__item--featured .editorial-card {
		display: grid;
		grid-template-columns: 1.2fr 1fr;
		gap: var(--space-6);
		align-items: center;
	}
}

.editorial-card {
	display: block;
	color: inherit;
}

.editorial-card__category {
	display: block;
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.75rem;
	color: var(--color-accent-technical);
	margin-block: var(--space-2) var(--space-1);
}

.editorial-card__title {
	font-size: var(--text-h3);
	margin-bottom: var(--space-1);
}

.editorial-card__excerpt {
	color: var(--color-text-muted);
}

.editorial-grid__item--featured .editorial-card__title {
	font-size: var(--text-h2);
}

/* Detalle editorial de caso individual */

.case-detail__block {
	padding-block: var(--space-8);
	border-top: 1px solid var(--color-border);
}

.case-detail__number {
	font-family: var(--font-display);
	color: var(--color-accent-text);
	font-size: 0.85rem;
	display: block;
	margin-bottom: var(--space-1);
}

.case-detail__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin-block: var(--space-4);
	font-size: 0.85rem;
}

.case-detail__meta dt {
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	color: var(--color-text-muted);
}

.case-detail__meta dd {
	margin: 0;
	color: var(--color-text);
}

/* Formularios (B2B) */

.form-grid {
	display: grid;
	gap: var(--space-3);
	max-width: 640px;
}

@media (min-width: 640px) {
	.form-grid--two-col {
		grid-template-columns: 1fr 1fr;
	}
}

.form-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.form-field--wide {
	grid-column: 1 / -1;
}

.form-field label {
	font-family: var(--font-display);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text-muted);
}

.form-field input,
.form-field select,
.form-field textarea {
	width: 100%;
	padding: 0.75em;
	background: var(--color-surface);
	border: 1px solid var(--color-light-gray);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 1rem;
}

.form-field textarea {
	resize: vertical;
	min-height: 100px;
}

.form-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form-message {
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-border);
	margin-bottom: var(--space-3);
}

.form-message--success {
	border-color: var(--color-accent);
}

.form-message--error {
	border-color: var(--color-mid-gray);
}

/* Comparador de materiales (tabla ya existe en sections.css .materials__table
   — se reutiliza tal cual en /materiales/). Reveal interactivo de materiales. */

.material-grid {
	display: grid;
	gap: 1px;
	background: var(--color-border);
	border: 1px solid var(--color-border);
	margin-block: var(--space-6);
}

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

.material-card {
	position: relative;
	background: var(--color-bg);
	padding: var(--space-4);
	overflow: hidden;
}

.material-card__glow {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(
		circle 260px at var(--x, 50%) var(--y, 50%),
		color-mix(in srgb, var(--color-accent) 12%, transparent),
		transparent 70%
	);
	transition: opacity 200ms ease;
}

.material-card:hover .material-card__glow {
	opacity: 1;
}

.material-card__name {
	font-size: var(--text-h3);
	margin-bottom: var(--space-1);
}

.material-card__tagline {
	color: var(--color-accent-text);
	font-family: var(--font-display);
	margin-bottom: var(--space-2);
}

.material-card__specs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-1) var(--space-3);
	margin-top: var(--space-3);
	font-size: 0.85rem;
}

.material-card__specs dt {
	color: var(--color-text-muted);
}

.material-card__specs dd {
	margin: 0;
	font-weight: 600;
}

.material-card__uso {
	margin-top: var(--space-3);
	font-size: 0.9rem;
	color: var(--color-text-muted);
}

/* Blog: filtros de categoría */

.filter-nav {
	display: flex;
	gap: var(--space-2);
	overflow-x: auto;
	padding-block: var(--space-3);
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	margin-bottom: var(--space-8);
}

.filter-nav a {
	flex: none;
	padding: 0.5em 1em;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	font-size: 0.85rem;
	white-space: nowrap;
}

.filter-nav a[aria-current="page"] {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-black);
}

/* Blog: artículo */

.article {
	max-width: 720px;
	padding-block: var(--space-6) var(--space-16);
}

.article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	align-items: center;
	color: var(--color-text-muted);
	font-size: 0.85rem;
	margin-bottom: var(--space-3);
}

.article__title {
	font-size: var(--text-h1);
	margin-bottom: var(--space-3);
}

.article__excerpt {
	font-size: var(--text-lead);
	color: var(--color-text-muted);
	margin-bottom: var(--space-4);
}

.article__cover {
	margin-bottom: var(--space-6);
	border: 1px solid var(--color-border);
}

.article__toc {
	border: 1px solid var(--color-border);
	padding: var(--space-3) var(--space-4);
	margin-bottom: var(--space-6);
}

.article__toc-title {
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	color: var(--color-text-muted);
	margin-bottom: var(--space-2);
}

.article__toc ol {
	list-style: decimal;
	padding-left: 1.25em;
}

.article__toc li {
	margin-bottom: var(--space-1);
}

.article__body {
	font-size: var(--text-body);
}

.article__body h2 {
	font-size: var(--text-h3);
	margin-top: var(--space-8);
	margin-bottom: var(--space-2);
	scroll-margin-top: var(--space-8);
}

.article__body h3 {
	font-size: 1.25rem;
	margin-top: var(--space-6);
	margin-bottom: var(--space-2);
	scroll-margin-top: var(--space-8);
}

.article__body p {
	margin-bottom: var(--space-3);
}

.article__body ul,
.article__body ol {
	margin-bottom: var(--space-3);
	padding-left: 1.25em;
}

.article__body ul {
	list-style: disc;
}

.article__body ol {
	list-style: decimal;
}

.article__body li {
	color: var(--color-text-muted);
	margin-bottom: var(--space-1);
}

.article__body blockquote {
	border-left: 2px solid var(--color-accent);
	padding-left: var(--space-3);
	margin: var(--space-4) 0;
	font-family: var(--font-display);
	font-size: 1.25rem;
}

.article__body img {
	margin-block: var(--space-4);
	border: 1px solid var(--color-border);
}

.article__body table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--space-4);
	font-size: 0.9rem;
}

.article__body table th,
.article__body table td {
	text-align: left;
	padding: var(--space-1) var(--space-2);
	border-bottom: 1px solid var(--color-border);
}

.article__body pre {
	background: var(--color-black);
	color: var(--color-on-dark);
	padding: var(--space-3);
	overflow-x: auto;
	font-size: 0.85rem;
	margin-bottom: var(--space-4);
}

.article__inline-cta {
	border: 1px solid var(--color-border);
	padding: var(--space-4);
	margin-block: var(--space-8);
	text-align: center;
}

.article__inline-cta p {
	margin-bottom: var(--space-2);
	color: var(--color-text);
}

/* Relacionados */

.related-posts {
	padding-block: var(--space-12);
	border-top: 1px solid var(--color-border);
}

.related-posts__grid {
	display: grid;
	gap: var(--space-4);
}

@media (min-width: 768px) {
	.related-posts__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* FAQ — <details>/<summary> nativos: accesibles y operables por teclado sin JS. */

.faq-list {
	max-width: 720px;
}

.faq-item {
	border-top: 1px solid var(--color-border);
	padding-block: var(--space-3);
}

.faq-item:last-child {
	border-bottom: 1px solid var(--color-border);
}

.faq-item summary {
	cursor: pointer;
	font-family: var(--font-display);
	font-weight: 600;
	list-style: none;
}

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

.faq-item summary::before {
	content: "+";
	display: inline-block;
	width: 1.2em;
	color: var(--color-accent-text);
}

.faq-item[open] summary::before {
	content: "–";
}

.faq-item p {
	margin-top: var(--space-2);
	padding-left: 1.2em;
}

/* Paginación */

.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	padding-block: var(--space-6);
	font-family: var(--font-display);
	font-size: 0.9rem;
}

.pagination .page-numbers {
	padding: 0.5em 0.9em;
	border: 1px solid var(--color-border);
}

.pagination .page-numbers.current {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-black);
}

/* Estados vacíos */

.empty-state {
	padding-block: var(--space-12);
	text-align: center;
	color: var(--color-text-muted);
	max-width: 480px;
	margin-inline: auto;
}