/* ==========================================================================
   Conecta Lab — hoja de estilos principal
   Organización: tokens → base → layout → componentes → páginas → utilidades
   Mobile-first. Breakpoints: 480px, 768px, 1024px, 1440px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fuentes (Lexend auto-hospedada)
   -------------------------------------------------------------------------- */
@font-face {
	font-family: 'Lexend';
	src: url('../fonts/Lexend-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Lexend';
	src: url('../fonts/Lexend-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokens de diseño (kit de marca)
   -------------------------------------------------------------------------- */
:root {
	--navy-dark:      #16215B;
	--blue-primary:   #076CF2;
	--blue-secondary: #3D6BED;
	--blue-light:     #259CF4;
	--green-accent:   #6FE0A8;
	--yellow-accent:  #FFC45F;
	--lilac-accent:   #F0A9F9;
	--gray-text:      #3C3F44;
	--gray-blue-bg:   #BDCCD4;
	--white:          #FFFFFF;

	/* Derivados usados en fondos suaves del diseño */
	--bg-page:   #E7F0FB;
	--bg-mint:   #DDF5E9;
	--bg-card:   var(--white);

	--font-sans: 'Lexend', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--radius-sm: 8px;
	--radius-md: 14px;
	--radius-lg: 24px;
	--shadow-card: 0 10px 30px rgba(22, 33, 91, 0.10);
	--shadow-btn:  0 6px 18px rgba(7, 108, 242, 0.35);

	--container: 1240px;
	--gutter: 20px;
}

/* --------------------------------------------------------------------------
   3. Base / reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 1rem;             /* 16px; sube a 17-18 en desktop */
	line-height: 1.65;
	color: var(--gray-text);
	background: var(--bg-page);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-weight: 700;
	line-height: 1.15;
	color: var(--navy-dark);
	margin: 0 0 0.6em;
}

p { margin: 0 0 1em; }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--blue-primary); text-decoration: none; }
a:hover { color: var(--blue-secondary); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--blue-light);
	outline-offset: 2px;
	border-radius: 4px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}
.skip-link:focus {
	position: fixed !important;
	top: 8px; left: 8px;
	width: auto; height: auto;
	clip-path: none;
	z-index: 999;
	background: var(--white);
	padding: 10px 16px;
	border-radius: var(--radius-sm);
}

.container {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.container--narrow { max-width: 800px; }

/* --------------------------------------------------------------------------
   4. Componentes compartidos
   -------------------------------------------------------------------------- */

/* Botones */
.btn {
	display: inline-block;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1;
	padding: 14px 26px;
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	text-align: center;
	transition: background-color 0.2s ease, transform 0.15s ease;
}
.btn--primary {
	background: var(--blue-primary);
	color: var(--white);
	box-shadow: var(--shadow-btn);
}
.btn--primary:hover { background: var(--blue-secondary); color: var(--white); transform: translateY(-1px); }
.btn--lg { padding: 17px 32px; font-size: 1rem; }
.btn--ghost {
	background: transparent;
	color: var(--blue-primary);
	border: 2px solid var(--blue-primary);
}
.btn--ghost:hover { background: var(--blue-primary); color: var(--white); }

/* Eyebrows (antetítulos) */
.eyebrow {
	font-weight: 700;
	font-size: 0.95rem;
	margin-bottom: 14px;
}
.eyebrow--green { color: var(--gray-text); }
.eyebrow--green strong { color: #2FBF7B; } /* verde con contraste AA sobre fondo claro */
.eyebrow--blue { color: var(--blue-light); }

/* Titulares de sección */
.page-title,
.section-title {
	font-size: clamp(1.7rem, 4.5vw, 2.6rem);
}
.section-text { max-width: 46ch; }

/* Estrellas de calificación */
.stars { letter-spacing: 3px; font-size: 0.85rem; margin: 0; }
.stars--gold { color: var(--yellow-accent); }
.stars--green { color: var(--green-accent); }

/* Tarjeta genérica */
.card {
	background: var(--bg-card);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
}

.notice {
	background: var(--white);
	border-left: 4px solid var(--yellow-accent);
	padding: 14px 18px;
	border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.site-header {
	padding: 22px 0;
	background: var(--bg-page);
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
/* Ancla el alto de fila del header (no cambia aunque el logo sea más grande),
   así el logo puede crecer sin mover la posición del menú. */
.site-header__logo {
	display: flex;
	align-items: center;
	height: 62px;
	overflow: visible;
}
.site-header__logo img { width: 380px; height: auto; }

/* Hamburguesa (visible < 1024px) */
.site-header__burger {
	display: inline-flex;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: 0;
	padding: 8px;
	cursor: pointer;
}
.site-header__burger span {
	width: 26px; height: 3px;
	border-radius: 2px;
	background: var(--navy-dark);
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.site-header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.site-header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.site-nav {
	display: none;
	width: 100%;
	flex-direction: column;
	gap: 18px;
	padding-top: 12px;
}
.site-nav.is-open { display: flex; }

.site-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.site-nav__list a {
	display: block;
	padding: 10px 6px;
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--gray-text);
}
.site-nav__list a:hover,
.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_item > a {
	color: var(--blue-primary);
}

/* "Contactos y PQR" como un ítem más del menú (mismo estilo que el resto). */
.site-header__cta {
	display: block;
	padding: 10px 6px;
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--gray-text);
}
.site-header__cta:hover { color: var(--blue-primary); }

/* --------------------------------------------------------------------------
   6. Footer
   -------------------------------------------------------------------------- */
.site-footer {
	background: var(--navy-dark);
	color: var(--white);
	padding: 56px 0 48px;
	margin-top: 72px;
	font-size: 0.9rem;
}
.site-footer a { color: var(--white); }
.site-footer a:hover { color: var(--green-accent); }

.site-footer__inner {
	display: grid;
	gap: 40px;
	grid-template-columns: 1fr;
}
.site-footer__logo { width: 340px; margin-bottom: 20px; }
.site-footer__social-title { font-weight: 700; margin-bottom: 10px; }

.social-links {
	list-style: none;
	display: flex;
	gap: 14px;
	margin: 0 0 20px;
	padding: 0;
}
.social-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px; height: 38px;
	border: 1.5px solid rgba(255, 255, 255, 0.6);
	border-radius: 50%;
	transition: border-color 0.2s ease, color 0.2s ease;
}
.social-links a:hover { border-color: var(--green-accent); }

.site-footer__description { opacity: 0.85; max-width: 42ch; }

.site-footer__menu {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: grid;
	gap: 8px;
}
.site-footer__menu a { font-weight: 700; }
.site-footer__faq { display: flex; gap: 32px; flex-wrap: wrap; font-weight: 700; }

.site-footer__contact p { margin-bottom: 14px; }
.site-footer__address { opacity: 0.85; }
.site-footer__phone a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   7. Home — banner mensual, hero y mosaico
   -------------------------------------------------------------------------- */

/* Banner editable desde el Customizer (Rubén lo actualiza cada mes). */
.monthly-banner {
	background: linear-gradient(90deg, var(--navy-dark), var(--blue-secondary));
	color: var(--white);
}
.monthly-banner__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 20px;
	padding: 12px var(--gutter);
	text-align: center;
	font-size: 0.85rem;
}
.monthly-banner__text { margin: 0; }
.monthly-banner__text strong { margin-right: 8px; }
.monthly-banner__text span { opacity: 0.9; }
.monthly-banner__cta {
	color: var(--white);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}
.monthly-banner__cta:hover { color: var(--green-accent); }

/* Puente hacia la página Empresas (ver front-page.php). */
.empresas-bridge {
	background: var(--navy-dark);
	color: var(--white);
	padding: 32px 0;
	margin-top: 64px;
}
.empresas-bridge__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px 28px;
	text-align: center;
}
.empresas-bridge__text { margin: 0; font-size: 1rem; }
.empresas-bridge__text strong { display: block; margin-bottom: 2px; }
.empresas-bridge__text span { opacity: 0.85; font-size: 0.9rem; }
.empresas-bridge__cta {
	display: inline-block;
	background: var(--white);
	color: var(--navy-dark);
	font-weight: 700;
	padding: 12px 22px;
	border-radius: 10px;
	white-space: nowrap;
}
.empresas-bridge__cta:hover { background: var(--green-accent); color: var(--navy-dark); }

.hero { padding: 40px 0 72px; }
.hero__inner {
	display: grid;
	gap: 48px;
	grid-template-columns: 1fr;
	align-items: center;
}
.hero__title { font-size: clamp(1.9rem, 5vw, 3.3rem); }
.hero__text { max-width: 46ch; margin-bottom: 28px; }

.hero__search {
	display: flex;
	background: var(--white);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	padding: 8px;
	max-width: 460px;
	gap: 8px;
}
.hero__search input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	font-family: var(--font-sans);
	font-size: 0.95rem;
	padding: 10px 14px;
	color: var(--gray-text);
}
.hero__search input:focus-visible { outline-offset: -2px; }

/* Mosaico decorativo de círculos y píldoras */
.hero__mosaic { position: relative; min-height: 420px; }

.mosaic {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 11px;
	max-width: 460px;
	margin-inline: auto;
}
.mosaic__cell {
	position: relative;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--blue-secondary);
	background-position: center;
	background-size: cover;
}
.m-primary { background-color: var(--blue-secondary); }
.m-blue    { background-color: var(--blue-light); }
.m-green   { background-color: var(--green-accent); }
.m-yellow  { background-color: var(--yellow-accent); }
.m-lilac   { background-color: var(--lilac-accent); }
.m-light   { background-color: var(--blue-light); }

.m-span2,
.mosaic__cell.span2 {
	grid-column: span 2;
	aspect-ratio: auto;
	border-radius: 999px;
}

/* "Swab": cilindro con un círculo en la punta, como un hisopo de Auto-toma. */
.mosaic__cell.m-swab {
	position: relative;
	grid-column: span 2;
	aspect-ratio: auto;
	background-color: var(--blue-light);
	border-radius: 999px;
	overflow: visible;
}
.mosaic__cell.m-swab::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var(--blue-secondary);
}

/* Versión vertical del "swab": cilindro de pie con un círculo en la base. */
.mosaic__cell.m-swab-v {
	position: relative;
	grid-row: span 2;
	aspect-ratio: auto;
	background-color: var(--blue-secondary);
	border-radius: 999px;
	overflow: visible;
}
.mosaic__cell.m-swab-v::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var(--green-accent);
}

/* Las dos fotos reales del mosaico (el resto de celdas queda en color plano
   hasta tener más fotos del equipo). */
.mosaic__cell.photo-lina  { background-color: var(--gray-blue-bg); background-image: url('../img/equipo-lina-gomez.jpeg'); }
.mosaic__cell.photo-ruben { background-color: var(--gray-blue-bg); background-image: url('../img/equipo-ruben-hernandez.png'); }

/* Tarjetas flotantes de equipo destacado */
.team-badge {
	position: absolute;
	background: var(--white);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	padding: 12px 16px;
	min-width: 175px;
	z-index: 2;
}
.team-badge__name { font-weight: 700; color: var(--navy-dark); margin: 0; font-size: 0.9rem; }
.team-badge__row { display: flex; gap: 10px; align-items: baseline; margin: 2px 0; }
.team-badge__role { font-size: 0.8rem; }
.team-badge__top { color: var(--yellow-accent); font-size: 0.72rem; font-weight: 700; }

/* Tarjeta anclada directamente encima de la celda de foto (Lina/Rubén):
   siempre queda sobre la cabeza sin importar el ancho de pantalla, porque
   se posiciona relativo a su propia celda y no al mosaico completo. */
.team-badge--anchored {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 10px;
	z-index: 3;
}
/* La de Rubén queda más abajo (menos margen) para no tocar la foto de Lina,
   que en este layout cae justo encima de su celda. Su celda además está
   pegada al borde derecho del mosaico: centrada con left:50%/transform (el
   comportamiento por defecto de .team-badge--anchored) se sale de la
   pantalla en varios anchos intermedios (se detectó en móvil y de nuevo en
   ~900px) — anclada por su borde derecho queda siempre dentro del
   contenedor, así que aquí va fija en vez de depender de un breakpoint. */
.team-badge--anchored-tight {
	margin-bottom: 6px;
	left: auto;
	right: 0;
	transform: none;
}

/* Respaldo genérico (solo para un 3er destacado sin foto propia en el
   mosaico; con Lina y Rubén ya no se usa, ver front-page.php). */
.team-badge--1 { top: -4%; left: 0; }
.team-badge--2 { top: 30%; right: 0; }
.team-badge--3 { top: 55%; left: 0; }

/* --------------------------------------------------------------------------
   8. Quiénes somos
   -------------------------------------------------------------------------- */
.about-hero {
	background: linear-gradient(180deg, var(--bg-page) 0 8%, var(--bg-mint) 8% 92%, var(--bg-page) 92% 100%);
	padding: 56px 0;
}
.about-hero__inner {
	display: grid;
	gap: 48px;
	grid-template-columns: 1fr;
	align-items: center;
}

.about-hero__team {
	display: grid;
	gap: 22px;
	grid-template-columns: 1fr;
}
/* Equipo reducido (2 personas): centrado, sin el escalonado del grid grande. */
.about-hero__team--compact {
	max-width: 480px;
	margin-inline: auto;
}

.team-card {
	background: var(--white);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	padding: 22px;
}
.team-card__photo img,
.team-card__photo {
	width: 72px; height: 72px;
	border-radius: 50%;
	object-fit: cover;
	overflow: hidden;
}
.team-card__photo { margin-bottom: 12px; }
.team-card__name { font-size: 1.05rem; margin: 0 0 2px; }
.team-card__role { color: var(--blue-secondary); font-weight: 700; font-size: 0.85rem; margin: 0 0 10px; }
.team-card__meta { font-size: 0.8rem; margin: 0; opacity: 0.85; overflow-wrap: anywhere; }
.team-card .stars { margin-top: 10px; }

/* Muro de testimonios (masonry con CSS columns) */
.testimonials { padding: 72px 0 24px; }
.testimonials__title {
	text-align: center;
	font-size: clamp(1.5rem, 3.6vw, 2.2rem);
	color: var(--blue-secondary);
	margin-bottom: 48px;
}
.testimonials__wall {
	columns: 1;
	column-gap: 22px;
}
.testimonial-card {
	break-inside: avoid;
	background: var(--white);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	padding: 24px;
	margin-bottom: 22px;
}
.testimonial-card .stars {
	background: rgba(111, 224, 168, 0.18);
	display: inline-block;
	padding: 4px 10px;
	border-radius: 6px;
	margin-bottom: 14px;
	color: #1E9E63; /* verde AA sobre el fondo del badge */
}
.testimonial-card__quote { margin: 0 0 18px; font-size: 0.9rem; }
.testimonial-card__quote p { margin: 0; }
.testimonial-card__author { display: flex; align-items: center; gap: 12px; }
.testimonial-card__avatar {
	width: 42px; height: 42px;
	border-radius: 50%;
	background: var(--bg-page);
	color: var(--gray-blue-bg);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
}
.testimonial-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.testimonial-card__name { display: block; color: var(--navy-dark); font-size: 0.9rem; }
.testimonial-card__role { font-size: 0.8rem; opacity: 0.85; }

/* Misión, Visión y Valores (reemplaza el muro de testimonios en Quiénes somos). */
.mvv { padding: 72px 0; }
.mvv__grid {
	display: grid;
	gap: 24px;
	grid-template-columns: 1fr;
}
.mvv__card {
	background: var(--white);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	padding: 30px 28px;
	border-top: 4px solid var(--blue-primary);
}
.mvv__title { font-size: 1.2rem; margin-bottom: 14px; }
.mvv__text { font-size: 0.92rem; margin: 0; }

/* Valores: una tarjeta por valor, en su propia franja debajo de Misión/Visión. */
.mvv__values { margin-top: 24px; }
.mvv__values-title { font-size: 1.2rem; margin: 0 0 20px; }
.mvv__values-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: 1fr;
}
.mvv__value-card {
	background: var(--white);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	padding: 26px 24px;
	border-top: 4px solid var(--green-accent);
}
.mvv__value-title { font-size: 1.05rem; margin: 0 0 10px; color: var(--navy-dark); }
.mvv__value-text { font-size: 0.9rem; margin: 0; color: var(--gray-text); }

/* Página genérica (ej. Política de tratamiento de datos): texto largo con
   títulos y listas, sin el ancho completo del contenedor para que se lea
   cómodo. */
.legal-page { padding: 56px 0 72px; }
.legal-page__header { margin-bottom: 32px; }
.legal-content {
	max-width: 760px;
	color: var(--gray-text);
	font-size: 0.95rem;
	line-height: 1.7;
}
.legal-content h2 {
	color: var(--navy-dark);
	font-size: 1.2rem;
	margin: 36px 0 12px;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content p { margin: 0 0 16px; }
.legal-content ul { margin: 0 0 16px; padding-left: 22px; }
.legal-content li { margin-bottom: 8px; }
.legal-content a { text-decoration: underline; }

/* --------------------------------------------------------------------------
   9. Portafolio
   -------------------------------------------------------------------------- */
.portfolio { padding: 56px 0 40px; text-align: center; }
.portfolio__eyebrow { margin-bottom: 8px; }
.portfolio .page-title { max-width: 680px; margin-inline: auto; margin-bottom: 72px; }

.portfolio__grid {
	display: grid;
	gap: 36px;
	grid-template-columns: 1fr;
	align-items: start;
}
.portfolio__arrow { display: none; color: var(--gray-blue-bg); margin-top: 34px; }
.portfolio__empresas-cta { margin-top: 56px; }
.portfolio__intro { max-width: 640px; margin: -40px auto 56px; }
.portfolio__back-link { margin-top: 20px; font-size: 0.85rem; opacity: 0.8; }
.portfolio__back-link a { font-weight: 700; }

.service-card { text-align: center; }
.service-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 86px; height: 86px;
	border-radius: 50%;
	margin-bottom: 22px;
}
.service-card__icon--blue { background: rgba(37, 156, 244, 0.14); color: var(--blue-light); }
.service-card__icon--green { background: rgba(111, 224, 168, 0.22); color: #1E9E63; }
.service-card__title { font-size: 1.05rem; margin-bottom: 12px; }
.service-card__text { font-size: 0.85rem; max-width: 34ch; margin-inline: auto; }

/* Buscador de pruebas (538 registros del listado de Conecta Lab) */
.tests-search { padding: 24px 0 72px; text-align: center; }
.tests-search__title { margin-bottom: 10px; }
.tests-search .section-text { margin-inline: auto; margin-bottom: 28px; }

.tests-search__box {
	background: var(--white);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	padding: 6px;
	max-width: 520px;
	margin: 0 auto 12px;
}
.tests-search__box input {
	width: 100%;
	border: 0;
	background: transparent;
	font-family: var(--font-sans);
	font-size: 0.95rem;
	color: var(--gray-text);
	padding: 14px 18px;
}
.tests-search__box input::placeholder { color: #6e7379; }

.tests-search__count { font-size: 0.82rem; opacity: 0.75; min-height: 1.4em; margin-bottom: 10px; }

.tests-search__results {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	max-width: 640px;
	margin-inline: auto;
	max-height: 420px;
	overflow-y: auto;
	border-radius: var(--radius-md);
	background: var(--white);
	box-shadow: var(--shadow-card);
	text-align: left;
}
.tests-search__results:empty { box-shadow: none; background: transparent; }
.tests-search__item {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 18px;
	border-bottom: 1px solid var(--bg-page);
	font-size: 0.88rem;
}
.tests-search__item:last-child { border-bottom: 0; }
.tests-search__name { color: var(--navy-dark); }
.tests-search__code { color: var(--blue-secondary); font-weight: 700; white-space: nowrap; }

.tests-search__whatsapp {
	font-size: 0.9rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	max-width: 46ch;
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   11. Blog
   -------------------------------------------------------------------------- */
.blog-hero { padding: 64px 0 40px; text-align: center; position: relative; }
.blog-hero__inner { position: relative; }
.blog-hero__title { font-size: clamp(2rem, 6vw, 3.6rem); max-width: 800px; margin-inline: auto; }
.blog-hero__text { max-width: 60ch; margin: 0 auto 28px; }

/* Mosaico compacto decorativo (mismo componente .mosaic del Home). */
.blog-hero__mosaic {
	display: none;
	position: absolute;
	top: -12px;
	right: 0;
	width: 180px;
}
.mosaic--compact {
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
	max-width: 180px;
	margin: 0;
}
/* El swab normalmente toma su alto de una celda cuadrada vecina en la misma
   fila; aquí va solo en su fila, así que necesita su propia proporción. */
.mosaic--compact .mosaic__cell.m-swab { aspect-ratio: 2 / 1; }

.blog-grid { padding: 48px 0; }
.blog-grid__items {
	display: grid;
	gap: 40px 28px;
	grid-template-columns: 1fr;
	max-width: 1000px;
	margin-inline: auto;
}
.post-card__thumb {
	display: block;
	border-radius: var(--radius-sm);
	overflow: hidden;
	margin-bottom: 16px;
}
.post-card__thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.25s ease; }
.post-card:hover .post-card__thumb img { transform: scale(1.04); }
.post-card__title { font-size: 1.05rem; margin-bottom: 8px; }
.post-card__title a { color: var(--navy-dark); }
.post-card__title a:hover { color: var(--blue-primary); }
.post-card__excerpt { font-size: 0.85rem; margin-bottom: 10px; }
.post-card__meta { font-size: 0.78rem; color: var(--blue-secondary); font-weight: 700; margin: 0; }
.post-card__meta time { color: var(--gray-text); font-weight: 400; }

.pagination-nav { margin-top: 48px; text-align: center; }
.pagination-nav .nav-links { display: inline-flex; gap: 8px; }
.pagination-nav .page-numbers {
	display: inline-block;
	padding: 8px 14px;
	border-radius: var(--radius-sm);
	background: var(--white);
	font-weight: 700;
}
.pagination-nav .page-numbers.current { background: var(--blue-primary); color: var(--white); }

/* Entrada individual */
.single-post { padding-top: 48px; }
.single-post__header { text-align: center; margin-bottom: 24px; }
.single-post__thumb { margin: 0 0 32px; border-radius: var(--radius-md); overflow: hidden; }
.single-post__content { font-size: 1.05rem; }
.single-post__footer { padding: 40px 0; }

.archive-generic__header { text-align: center; margin-bottom: 40px; }

/* --------------------------------------------------------------------------
   12. Contactos y PQRS
   -------------------------------------------------------------------------- */
.contact { padding: 64px 0 32px; }
.contact__inner {
	display: grid;
	gap: 40px;
	grid-template-columns: 1fr;
	align-items: start;
}
.contact__rule {
	display: block;
	width: 110px; height: 5px;
	border-radius: 3px;
	background: var(--blue-secondary);
	margin-top: 4px;
}

.contact__form { max-width: 640px; }
.contact__row {
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr;
}
.form-field { margin-bottom: 16px; }
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="search"],
.form-field select,
.form-field textarea {
	width: 100%;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	background: var(--white);
	font-family: var(--font-sans);
	font-size: 0.95rem;
	color: var(--gray-text);
	padding: 16px 18px;
	box-shadow: 0 4px 14px rgba(22, 33, 91, 0.06);
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: #6e7379; } /* AA sobre blanco */
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color: var(--blue-light); }

.form-field select {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='none' stroke='%233C3F44' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 44px;
}
.form-field select:invalid { color: #6e7379; } /* opción "Desea:" sin elegir aún */

.form-field__label {
	display: block;
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--gray-text);
	margin-bottom: 8px;
}
.form-field textarea { resize: vertical; min-height: 200px; }

.form-field--hp { position: absolute; left: -9999px; }

.form-field--check { display: flex; align-items: center; gap: 10px; }
.form-field--check input { width: 18px; height: 18px; accent-color: var(--blue-primary); }
.form-field--check label { font-size: 0.9rem; }

.contact__feedback { font-weight: 700; min-height: 1.4em; }
.contact__feedback.is-error { color: #C0392B; }
.contact__feedback.is-success { color: #1E9E63; }

.contact__legal { font-size: 0.72rem; opacity: 0.75; max-width: 70ch; }

/* --------------------------------------------------------------------------
   13. Breakpoints
   -------------------------------------------------------------------------- */

/* ≥ 480px */
@media (min-width: 480px) {
	.about-hero__team { grid-template-columns: repeat(2, 1fr); }
	.contact__row { grid-template-columns: 1fr 1fr; }
	.blog-grid__items { grid-template-columns: repeat(2, 1fr); }
	.testimonials__wall { columns: 2; }
}

/* ≥ 768px */
@media (min-width: 768px) {
	body { font-size: 1.0625rem; }
	.portfolio__grid { grid-template-columns: repeat(2, 1fr); }
	.hero__inner { grid-template-columns: 1.1fr 1fr; }
	.hero__mosaic { min-height: 480px; }
	.mvv__grid { grid-template-columns: repeat(2, 1fr); }
	.mvv__values-grid { grid-template-columns: repeat(2, 1fr); }

	/* Con espacio de sobra alrededor, las tarjetas "derraman" hacia afuera.
	   El "top" de team-badge--1 se queda en -4% (heredado de la base) en
	   todos los anchos: restaurarlo a 4% aquí volvía a tapar la foto de
	   Lina entre ~768-1150px, que es el rango de escritorio más común. */
	.team-badge--1 { left: -4%; }
	.team-badge--2 { right: -6%; }
	.team-badge--3 { left: -8%; }
}

/* ≥ 1024px — nav horizontal, layouts de 2 columnas completos */
@media (min-width: 1024px) {
	.site-header__burger { display: none; }
	.site-nav {
		display: flex !important;
		flex-direction: row;
		align-items: center;
		gap: 28px;
		width: auto;
		padding-top: 0;
	}
	.site-nav__list { flex-direction: row; gap: 26px; }

	/* Footer en 3 cuerpos separados por líneas divisoras, como en el diseño. */
	.site-footer__inner {
		grid-template-columns: 1.3fr 1fr 1fr;
		gap: 0;
	}
	.site-footer__nav,
	.site-footer__contact {
		padding-left: 48px;
		margin-left: 48px;
		border-left: 1px solid rgba(255, 255, 255, 0.25);
	}

	.about-hero__inner { grid-template-columns: 1.15fr 1fr; }
	.about-hero__team {
		grid-template-columns: repeat(2, minmax(0, 230px));
		justify-content: center;
	}
	/* Escalonado del grid de equipo como en el diseño */
	.about-hero__team .team-card:nth-child(even) { transform: translateY(34px); }
	.about-hero__team--compact .team-card:nth-child(even) { transform: none; }
	.about-hero__team--compact {
		grid-template-columns: repeat(2, minmax(0, 240px));
	}

	.testimonials__wall { columns: 3; }
	.mvv__grid { grid-template-columns: repeat(2, 1fr); }
	.mvv__values-grid { grid-template-columns: repeat(3, 1fr); }

	.portfolio__grid {
		grid-template-columns: repeat(3, 1fr) ;
		gap: 20px;
	}
	/* Con flechas visibles: 3 tarjetas + 2 flechas = 5 columnas */
	.portfolio__grid { grid-template-columns: 1fr auto 1fr auto 1fr; }
	.portfolio__arrow { display: inline-flex; }

	.blog-grid__items { grid-template-columns: repeat(3, 1fr); }
	.blog-hero__mosaic { display: block; }

	.contact__inner { grid-template-columns: 0.8fr 1.4fr; }
}

/* ≥ 1440px */
@media (min-width: 1440px) {
	body { font-size: 1.125rem; }
	.container { padding-inline: 0; }
	.testimonials__wall { columns: 4; }
}

/* --------------------------------------------------------------------------
   14. Preferencias de usuario
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}