/* ==========================================================================
   Components — buttons, cards, hero, forms, stats, checklist.
   ========================================================================== */

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-6);
	border-radius: var(--radius-control);
	font-weight: 600;
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform .12s ease, background-color .12s ease;
}
.btn:hover { transform: translateY(-1px); }

.btn--primary {
	background: var(--color-primary);
	color: #fff;
}
.btn--primary:hover { background: var(--color-primary-dark); color: #fff; }

.btn--outline {
	background: transparent;
	border-color: currentColor;
	color: inherit;
}

.btn--on-dark.btn--outline {
	color: #fff;
}

/* Hero (Inicio) — brochure-cover split layout: text left, portrait graphic
   right, light background. */
.hero-split {
	background: var(--color-surface);
	padding-block: var(--space-9);
	overflow: hidden;
}

.hero-split__grid {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	align-items: center;
	gap: var(--space-8);
}

.hero-split__text {
	max-width: 560px;
}

.hero-split__eyebrow {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: .8rem;
	font-weight: 700;
	color: #fff;
	background: var(--color-primary);
	padding: var(--space-2) var(--space-4);
	border-radius: 999px;
	margin-bottom: var(--space-4);
}

.hero-split__media img {
	width: 100%;
	height: auto;
	display: block;
}

@media (max-width: 860px) {
	.hero-split__grid {
		grid-template-columns: 1fr;
	}

	.hero-split__media {
		order: -1;
		max-width: 360px;
		margin-inline: auto;
	}

	.hero-split__text {
		max-width: none;
		text-align: center;
	}

	.hero-split__text .hero__actions {
		justify-content: center;
	}
}

/* Photo + dark-blue-filter layer, used by every dark CTA band
   (.section--dark). background-blend-mode "multiply"s the photo against a
   dark navy background-color — a true color filter over the image, not
   just a translucent layer on top of it. */
.bg-photo {
	position: absolute;
	inset: 0;
	background-color: #0A2A4D;
	background-size: cover;
	background-position: center;
	background-blend-mode: multiply;
}

/* No photo uploaded yet (Personalizar → Portada de Inicio, or
   assets/img/hero-bg.jpg) — same dark-blue brand look without one. */
.bg-photo--fallback {
	background-image: linear-gradient(135deg, var(--color-brand-blue), var(--color-surface-dark) 140%);
	background-blend-mode: normal;
}

/* Extra bottom-heavy scrim on top of the photo/fallback so text stays
   legible regardless of what's in the image. */
.bg-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(6, 20, 38, .35) 0%, rgba(6, 20, 38, .75) 100%);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin-top: var(--space-6);
}

/* Cards */
.card {
	background: var(--color-bg);
	border-top: 6px solid var(--card-accent, var(--color-brand-blue));
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	padding: var(--space-6);
	height: 100%;
}

/* Optional image bleeding to the card's edges (e.g. a vacancy's featured
   image, or a Noticias post thumbnail), sitting right below the colored top
   border. display:block since this wraps an <a> in some usages (inline by
   default, which would break the aspect-ratio/negative-margin sizing). */
.card__thumb {
	display: block;
	margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-5);
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.card--blue  { --card-accent: var(--color-brand-blue); }
.card--red   { --card-accent: var(--color-brand-red); }
.card--gold  { --card-accent: var(--color-brand-gold); }
.card--green { --card-accent: var(--color-brand-green); }

.card__icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--card-accent, var(--color-brand-blue));
	display: grid;
	place-items: center;
	margin-bottom: var(--space-4);
}

.card__icon img {
	width: 28px;
	height: 28px;
	filter: brightness(0) invert(1);
}

.card__stat {
	display: inline-block;
	margin-top: var(--space-3);
	font-weight: 700;
	color: var(--card-accent, var(--color-brand-blue));
	font-size: .9rem;
}

/* Photo card — brochure-style: a color-duotone photo filling the card,
   a small icon badge in the corner, text over a bottom scrim. Used for
   Servicios cards and the Misión/Visión cards on Nosotros. */
.photo-card {
	position: relative;
	min-height: 360px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	border-radius: var(--radius-card);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	color: #fff;
}

.photo-card--compact {
	min-height: 240px;
}

/* Plain photo panel (no scrim/content slot) for split layouts where the
   text sits in a separate column instead of overlaid on the image — e.g.
   Talento humano, Por qué elegirnos. */
.photo-panel {
	position: relative;
	min-height: 280px;
	height: 100%;
	border-radius: var(--radius-card);
	overflow: hidden;
	box-shadow: var(--shadow-card);
}

.photo-card__bg {
	position: absolute;
	inset: 0;
	background-color: var(--card-accent, var(--color-brand-blue));
	background-size: cover;
	background-position: center;
	background-blend-mode: multiply;
}

.photo-card__bg--fallback {
	background-image: linear-gradient(160deg, var(--card-accent, var(--color-brand-blue)), var(--color-surface-dark) 150%);
	background-blend-mode: normal;
}

.photo-card__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(6, 12, 22, .05) 0%, rgba(6, 12, 22, .82) 78%);
}

.photo-card__badge {
	position: absolute;
	top: var(--space-4);
	right: var(--space-4);
	z-index: 1;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .95);
	color: var(--card-accent, var(--color-brand-blue));
	display: grid;
	place-items: center;
}

.photo-card__badge svg {
	width: 22px;
	height: 22px;
}

.photo-card__content {
	position: relative;
	z-index: 1;
	padding: var(--space-6);
}

.photo-card__content h2,
.photo-card__content h3 {
	color: #fff;
	margin-bottom: var(--space-2);
}

.photo-card__content h2 a,
.photo-card__content h3 a {
	color: inherit;
	text-decoration: none;
}

.photo-card__content p {
	color: rgba(255, 255, 255, .9);
	margin-bottom: 0;
}

.photo-card__bullets {
	list-style: none;
	margin: var(--space-3) 0 0;
	padding: 0;
	display: grid;
	gap: var(--space-2);
}

.photo-card__bullets li {
	position: relative;
	padding-left: var(--space-5);
	color: rgba(255, 255, 255, .92);
	font-size: .92rem;
	line-height: 1.5;
}

.photo-card__bullets li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .5em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
}

.photo-card__stat {
	display: inline-block;
	margin-top: var(--space-4);
	padding: var(--space-2) var(--space-3);
	border-radius: 999px;
	background: rgba(255, 255, 255, .16);
	font-weight: 700;
	font-size: .8rem;
}

/* Valores — 5-column brochure layout: rectangular colored icon block on
   top, name + short tagline below (see .grid--valores in layout.css). */
.valor-item {
	text-align: center;
}

.valor-item__image {
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-card);
	background: var(--color-surface);
	overflow: hidden;
	margin-bottom: var(--space-4);
}

.valor-item__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.valor-item h3 {
	font-size: 1.05rem;
	margin-bottom: var(--space-1);
}

.valor-item p {
	color: var(--color-muted);
	font-size: .88rem;
	margin: 0;
}

/* "Síguenos" social links section (Inicio, Contacto) */
.social-links {
	list-style: none;
	margin: var(--space-6) 0 0;
	padding: 0;
	display: flex;
	justify-content: center;
	gap: var(--space-4);
}

.social-links__item {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--color-primary);
	color: #fff;
	text-decoration: none;
	display: grid;
	place-items: center;
	transition: transform .12s ease, background-color .12s ease;
}

.social-links__item:hover {
	background: var(--color-primary-dark);
	color: #fff;
	transform: translateY(-2px);
}

.social-links__item svg {
	width: 26px;
	height: 26px;
}

.badge {
	display: inline-block;
	padding: .25rem .65rem;
	margin: 0 var(--space-2) var(--space-2) 0;
	border-radius: 999px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	font-size: .75rem;
	font-weight: 700;
	color: var(--color-muted);
}

.card--simple {
	border-top: 0;
	border: 1px solid var(--color-border);
	box-shadow: none;
}

/* Stat block (Talento humano) */
.stat {
	padding: var(--space-5);
}

.stat__number {
	display: block;
	font-family: var(--font-heading);
	font-size: 2.5rem;
	font-weight: 800;
	color: var(--color-primary);
}

.stat__label {
	color: var(--color-muted);
}

/* Checklist (Por qué elegirnos) */
.checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-3);
}

.checklist li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	font-weight: 600;
}

.checklist li::before {
	content: '\2713';
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--color-brand-green);
	color: #fff;
	display: grid;
	place-items: center;
	font-size: .85rem;
}

/* Forms */
.form {
	display: grid;
	gap: var(--space-5);
	max-width: 640px;
}

.form-row {
	display: grid;
	gap: var(--space-2);
}

.form-row label {
	font-weight: 600;
	font-size: .9rem;
}

.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row input[type="file"],
.form-row select,
.form-row textarea {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-control);
	padding: var(--space-3);
	background: #fff;
	color: var(--color-ink);
	width: 100%;
}

.form-row textarea {
	min-height: 140px;
	resize: vertical;
}

.form-row--checkbox {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
}

.form-row--checkbox label {
	font-weight: 400;
}

/* Honeypot field — off-screen but present, not display:none (bots that
   only skip display:none fields still fall for this one). */
.form-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form-notice {
	padding: var(--space-4);
	border-radius: var(--radius-control);
	font-weight: 600;
}

.form-notice--success {
	background: #e6f4ea;
	color: #1e6b34;
	border: 1px solid #b7ddc2;
}

.form-notice--error {
	background: #fdecea;
	color: #a4262c;
	border: 1px solid #f3c6c6;
}

/* Contact info block */
.contact-info dt {
	font-weight: 700;
	margin-top: var(--space-4);
}

.contact-info dd {
	margin: 0;
	color: var(--color-muted);
}

/* Blog / Noticias cards — same .card + .card__thumb used by Servicios and
   Vacantes, so the blog grid reads as part of the same site instead of a
   generic blog-template style. */
.card__thumb-fallback {
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
	background: color-mix(in srgb, var(--card-accent, var(--color-brand-blue)) 12%, var(--color-surface));
	color: var(--card-accent, var(--color-brand-blue));
}

.card__thumb-fallback svg {
	width: 30%;
	height: 30%;
}

.card .post-date {
	display: inline-block;
	padding: .2rem .6rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--card-accent, var(--color-brand-blue)) 12%, transparent);
	color: var(--card-accent, var(--color-brand-blue));
	font-weight: 700;
	font-size: .78rem;
	margin-bottom: var(--space-3);
}

.card__more {
	display: inline-block;
	margin-top: var(--space-2);
	font-weight: 700;
	color: var(--card-accent, var(--color-brand-blue));
	text-decoration: none;
}

.card__more:hover {
	text-decoration: underline;
}

.post-date {
	color: var(--color-muted);
	font-size: .85rem;
}

.prose :is(h2, h3) {
	margin-top: var(--space-7);
}

.prose p, .prose ul, .prose ol {
	line-height: 1.7;
}

.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-7);
}

.pagination a,
.pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: var(--space-2);
	border-radius: var(--radius-control);
	border: 1px solid var(--color-border);
	text-decoration: none;
	color: var(--color-ink);
}

.pagination .current {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}

/* CTA banner */
.cta-banner {
	text-align: center;
	border-radius: var(--radius-card);
	padding: var(--space-8) var(--space-6);
}

.cta-banner .hero__actions {
	justify-content: center;
}

/* Photo gallery placeholder (Nosotros) */
.gallery-placeholder {
	aspect-ratio: 4 / 3;
	background: var(--color-surface);
	border: 1px dashed var(--color-border);
	border-radius: var(--radius-control);
	display: grid;
	place-items: center;
	color: var(--color-muted);
	font-size: .85rem;
	text-align: center;
	padding: var(--space-3);
}