/*
Theme Name: iA4 Clinic
Theme URI: https://ia4clinic.com
Author: Digy Marketing
Author URI: https://digymkt.com/
Description: Tema a medida, de una sola página, para iA4 Clinic — asistente de inteligencia artificial para clínicas, hospitales y centros de estética. Incluye formulario de contacto con envío de leads por email, diseño responsive y accesible (WCAG AA).
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ia4clinic
*/

/* ============================================================
   1. VARIABLES DE DISEÑO (DESIGN TOKENS)
   ============================================================ */
:root {
	/* Navy — texto principal y elementos de UI */
	--navy: #25426B;
	--navy-deep: #16243C;
	--navy-soft: #4A6B91;

	/* Fondos — familia de azul cielo (degradado de página) */
	--sky-50: #F4F8FB;
	--sky-100: #E3EEF6;
	--sky-200: #CFE3F0;
	--sky-300: #AFCBDE;

	/* Cálido decorativo — SOLO para fondos/formas, nunca como texto ni
	   bajo texto blanco (el extremo ámbar no tiene suficiente contraste) */
	--coral: #FF3B4F;
	--orange: #FF9300;
	--amber: #FFC400;
	--gradient-warm: linear-gradient(135deg, var(--coral) 0%, var(--orange) 55%, var(--amber) 100%);

	/* Cálido accesible — para texto en degradado y botones CTA.
	   Verificado matemáticamente: ratio de contraste >= 4.46:1 en todo
	   el degradado, tanto como color de texto sobre fondo claro como
	   fondo de botón con texto blanco encima. */
	--coral-deep: #D6324A;
	--orange-deep: #C2410C;
	--gradient-cta: linear-gradient(135deg, var(--coral-deep) 0%, var(--orange-deep) 100%);

	/* Frío — acento de marca, uso puntual */
	--cyan: #17A8C5;
	--teal: #1FCDBE;
	--lime: #A8F87A;

	/* Acentos de estadísticas — SOLO para el anillo/gráfico decorativo,
	   nunca como color de texto (no superan AA sobre blanco) */
	--stat-blue: #4B7FF7;
	--stat-amber: #F3B86C;
	--stat-purple: #AE8DF5;

	/* Etiquetas Visión / Misión (verificadas sobre su propio fondo de tinte) */
	--vision-tag: #0E6B80;
	--vision-tint: #E6F5F3;
	--mission-tag: #A85300;
	--mission-tint: #FDEFE2;

	/* Estado del formulario */
	--success: #1E9E6B;
	--success-bg: #E7F7F0;
	--error: #D6324A;
	--error-bg: #FCEAEC;

	--white: #FFFFFF;

	/* Radios */
	--radius-pill: 999px;
	--radius-lg: 28px;
	--radius-md: 18px;
	--radius-sm: 12px;

	/* Sombras */
	--shadow-soft: 0 20px 45px -15px rgba(22, 36, 60, 0.18);
	--shadow-card: 0 12px 30px -14px rgba(22, 36, 60, 0.16);
	--shadow-cta: 0 14px 28px -10px rgba(214, 50, 74, 0.38);

	/* Tipografía */
	--font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

	/* Espaciado */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;

	/* Layout */
	--container-width: 1180px;
	--section-padding: clamp(64px, 9vw, 120px);

	/* Movimiento */
	--ease: cubic-bezier(0.16, 1, 0.3, 1);
	--transition-base: 0.3s var(--ease);
}

/* ============================================================
   2. TIPOGRAFÍA AUTOALOJADA (POPPINS) — sin Google Fonts, por
   privacidad/RGPD: no se hacen peticiones a servidores externos.
   ============================================================ */
@font-face {
	font-family: 'Poppins';
	src: url('assets/fonts/Poppins-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Poppins';
	src: url('assets/fonts/Poppins-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Poppins';
	src: url('assets/fonts/Poppins-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Poppins';
	src: url('assets/fonts/Poppins-Italic.woff') format('woff');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

/* ============================================================
   3. RESET Y BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	scroll-padding-top: 96px;
	-webkit-text-size-adjust: 100%;
}

body, h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

body {
	font-family: var(--font-body);
	background: linear-gradient(180deg, var(--sky-100) 0%, var(--sky-50) 28%, var(--sky-50) 72%, var(--sky-100) 100%);
	color: var(--navy);
	line-height: 1.65;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--navy-deep);
	line-height: 1.18;
	letter-spacing: -0.01em;
}
h1 { font-size: clamp(34px, 5vw, 56px); }
h2 { font-size: clamp(28px, 3.4vw, 40px); }
h3 { font-size: clamp(19px, 2vw, 22px); }
h4 { font-size: 17px; }

p { color: var(--navy-soft); }

::selection { background: var(--coral-deep); color: var(--white); }

:focus-visible {
	outline: 2.5px solid var(--coral-deep);
	outline-offset: 3px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ============================================================
   4. ACCESIBILIDAD — screen-reader-text / skip-link
   ============================================================ */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: 16px;
	left: 16px;
	width: auto;
	height: auto;
	margin: 0;
	padding: 13px 24px;
	overflow: visible;
	clip: auto;
	white-space: normal;
	background: var(--navy-deep);
	color: var(--white);
	font-weight: 600;
	font-family: var(--font-display);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-soft);
	z-index: 10000;
}

/* ============================================================
   5. UTILIDADES DE LAYOUT
   ============================================================ */
.container {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: 24px;
}

.section { padding-block: var(--section-padding); position: relative; }

.section-heading { max-width: 660px; margin-bottom: var(--space-8); }
.section-heading--center { margin-inline: auto; text-align: center; }
.section-heading h2 { margin-top: var(--space-3); }
.section-lead { margin-top: var(--space-4); font-size: 17px; }

/* ============================================================
   6. EYEBROW / TEXTO EN DEGRADADO
   ============================================================ */
.eyebrow {
	display: inline-block;
	margin-bottom: var(--space-3);
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--coral-deep);
}

.text-gradient {
	background: var(--gradient-cta);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ============================================================
   7. ICONOS
   ============================================================ */
.icon { width: 22px; height: 22px; flex-shrink: 0; color: var(--navy); }
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 30px; height: 30px; }
.icon--check { width: 18px; height: 18px; color: var(--teal); margin-right: var(--space-2); vertical-align: -3px; }

.hero__badges .icon,
.contact__reassurance .icon {
	color: var(--teal);
	margin-right: var(--space-2);
	vertical-align: -3px;
}

/* ============================================================
   8. BOTONES
   ============================================================ */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 15px;
	padding: 14px 28px;
	border-radius: var(--radius-pill);
	transition: transform var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base), border-color var(--transition-base);
	white-space: nowrap;
	cursor: pointer;
}

.btn--cta {
	background: var(--gradient-cta);
	color: var(--white);
	box-shadow: var(--shadow-cta);
}
.btn--cta:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -10px rgba(214, 50, 74, 0.46); }
.btn--cta:active { transform: translateY(0); }

.btn--ghost {
	background: transparent;
	color: var(--navy);
	border: 1.5px solid var(--sky-300);
}
.btn--ghost:hover { background: var(--white); border-color: var(--navy-soft); }

.btn--lg { padding: 17px 34px; font-size: 16px; }
.btn--block { width: 100%; }

.btn__spinner {
	display: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2.5px solid rgba(255, 255, 255, 0.4);
	border-top-color: var(--white);
	animation: btn-spin 0.7s linear infinite;
}
.btn.is-loading .btn__label { display: none; }
.btn.is-loading .btn__spinner { display: inline-block; }
.btn.is-loading { pointer-events: none; opacity: 0.85; }
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ============================================================
   9. REVELADO AL HACER SCROLL
   ============================================================ */
[data-reveal] {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   10. CABECERA Y NAVEGACIÓN
   ============================================================ */
.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	padding: 18px 0;
}

.site-header__inner { padding-inline: 20px; }

.navbar {
	max-width: var(--container-width);
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	background: rgba(255, 255, 255, 0.72);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: var(--radius-pill);
	padding: 10px 10px 10px 22px;
	box-shadow: 0 8px 24px -12px rgba(22, 36, 60, 0.12);
	transition: box-shadow var(--transition-base), background-color var(--transition-base);
}

.site-header.is-scrolled .navbar {
	background: rgba(255, 255, 255, 0.94);
	box-shadow: var(--shadow-soft);
}

.navbar__brand { display: flex; align-items: center; flex-shrink: 0; }
.navbar__logo { height: 120px; width: auto; transition: height 0.3s ease; }

.navbar__links {
	display: flex;
	align-items: center;
	gap: 28px;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 15px;
}
.navbar__links a { position: relative; padding: 6px 2px; transition: color var(--transition-base); }
.navbar__links a:hover { color: var(--coral-deep); }

.navbar__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.navbar__cta { padding: 11px 22px; font-size: 14px; }

.navbar__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	flex-shrink: 0;
}
.navbar__toggle span {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--navy-deep);
	border-radius: 2px;
	transition: transform var(--transition-base), opacity var(--transition-base);
}
.navbar__toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar__toggle.is-active span:nth-child(2) { opacity: 0; }
.navbar__toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   11. HERO
   ============================================================ */
.hero { position: relative; padding-top: clamp(56px, 8vw, 96px); overflow: hidden; }

.hero__bg {
	position: absolute;
	inset: -10% -10% auto -10%;
	height: 640px;
	background: var(--gradient-warm);
	opacity: 0.16;
	filter: blur(80px);
	z-index: -1;
	pointer-events: none;
}

.hero__inner {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: var(--space-8);
	align-items: center;
}

.hero__title { margin-top: var(--space-4); }
.hero__subtitle { margin-top: var(--space-5); font-size: 17.5px; max-width: 520px; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: var(--space-7); }

.hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	margin-top: var(--space-7);
	font-size: 14px;
	font-weight: 600;
	color: var(--navy);
}
.hero__badges li { display: flex; align-items: center; }

.hero__visual { position: relative; display: flex; justify-content: center; }

.hero__visual-glow {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 320px;
	height: 320px;
	background: var(--gradient-warm);
	opacity: 0.3;
	filter: blur(60px);
	border-radius: 50%;
	z-index: -1;
}

/* ---- Maqueta de chat (ilustrativa, no es una conversación real) ---- */
.chat-mock {
	width: 100%;
	max-width: 380px;
	background: var(--white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	overflow: hidden;
}

.chat-mock__header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	border-bottom: 1px solid var(--sky-100);
}

.chat-mock__avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--gradient-cta);
	color: var(--white);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.chat-mock__title { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.chat-mock__title strong { font-family: var(--font-display); font-size: 14.5px; color: var(--navy-deep); }
.chat-mock__status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--navy-soft); }
.chat-mock__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); display: inline-block; }
.chat-mock__time { font-size: 12px; color: var(--navy-soft); flex-shrink: 0; }

.chat-mock__body {
	padding: 18px;
	display: flex;
	flex-direction: column;
	min-height: 300px;
}

/* Los mensajes empiezan en display:none (ocupan 0 espacio) para que el
   indicador "escribiendo…", que es el último elemento del DOM, aparezca
   justo debajo del último mensaje ya revelado — no debajo de un hueco
   reservado para mensajes que todavía no se han mostrado. JS alterna
   display + la clase is-visible para animar la aparición. */
.chat-mock__msg {
	display: none;
	max-width: 84%;
	padding: 11px 15px;
	margin-bottom: var(--space-3);
	border-radius: 16px;
	font-size: 13.5px;
	line-height: 1.5;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.chat-mock__msg.is-visible { opacity: 1; transform: translateY(0); }

.chat-mock__msg--in {
	align-self: flex-start;
	background: var(--sky-100);
	color: var(--navy-deep);
	border-bottom-left-radius: 6px;
}
.chat-mock__msg--out {
	align-self: flex-end;
	background: var(--gradient-cta);
	color: var(--white);
	border-bottom-right-radius: 6px;
}

.chat-mock__typing {
	display: none;
	align-self: flex-end;
	gap: 4px;
	padding: 13px 16px;
	margin-bottom: var(--space-3);
	background: var(--sky-100);
	border-radius: 16px;
	border-bottom-right-radius: 6px;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.chat-mock__typing.is-visible { opacity: 1; transform: translateY(0); }
.chat-mock__typing span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--navy-soft);
	animation: typing-bounce 1.1s ease-in-out infinite;
}
.chat-mock__typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-mock__typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-bounce {
	0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
	30% { transform: translateY(-4px); opacity: 1; }
}

.chat-mock__footer {
	padding: 12px 18px;
	border-top: 1px solid var(--sky-100);
	font-size: 11.5px;
	font-style: italic;
	color: var(--navy-soft);
	text-align: center;
}

/* ============================================================
   12. EL RETO ACTUAL (ESTADÍSTICAS)
   ============================================================ */
.stats-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin-top: var(--space-7);
}

.stat-card {
	background: var(--white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: var(--space-7) var(--space-5);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.stat-card__ring {
	width: 120px;
	height: 120px;
	transform: rotate(-90deg);
	margin-bottom: var(--space-4);
}
.stat-card__ring-bg {
	fill: none;
	stroke: var(--sky-100);
	stroke-width: 10;
}
.stat-card__ring-fill {
	fill: none;
	stroke: var(--stat-color, var(--navy));
	stroke-width: 10;
	stroke-linecap: round;
	stroke-dasharray: 314.159;
	stroke-dashoffset: 314.159;
	transition: stroke-dashoffset 1.4s var(--ease);
}

.stat-card__number { display: flex; align-items: baseline; gap: 2px; }
.stat-card__count { font-family: var(--font-display); font-size: 40px; font-weight: 700; color: var(--navy-deep); }
.stat-card__pct { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--navy-deep); }
.stat-card__label { margin-top: var(--space-2); font-weight: 600; color: var(--navy); }

.stats-disclaimer { margin-top: var(--space-6); text-align: center; font-size: 13px; color: var(--navy-soft); opacity: 0.85; }

/* ============================================================
   13. SOBRE NOSOTROS
   ============================================================ */
.about__grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: var(--space-8);
	align-items: center;
}

.about__content p { margin-top: var(--space-4); font-size: 16.5px; }
.about__highlight {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--navy-deep) !important;
	font-size: 17.5px;
	padding-left: var(--space-4);
	border-left: 3px solid var(--coral-deep);
}

.about__visual { display: flex; justify-content: center; }

.orbit { position: relative; width: 320px; height: 320px; }
.orbit__ring { position: absolute; inset: 0; border: 2px dashed var(--sky-300); border-radius: 50%; }

.orbit__center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 116px;
	height: 116px;
	border-radius: 50%;
	background: var(--gradient-cta);
	color: var(--white);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	box-shadow: var(--shadow-cta);
	text-align: center;
}
.orbit__center .icon { color: var(--white); width: 24px; height: 24px; }
.orbit__center span { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; line-height: 1.2; }

.orbit__node {
	position: absolute;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--white);
	box-shadow: var(--shadow-card);
	display: flex;
	align-items: center;
	justify-content: center;
}
.orbit__node .icon { width: 24px; height: 24px; }
.orbit__node--1 { top: 2%; left: 50%; transform: translate(-50%, -50%); }
.orbit__node--2 { top: 78%; left: 10%; transform: translate(-50%, -50%); }
.orbit__node--3 { top: 78%; left: 90%; transform: translate(-50%, -50%); }

/* ============================================================
   14. SERVICIOS
   ============================================================ */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

.service-card {
	background: var(--white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: var(--space-7) var(--space-6);
	transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }

.service-card__icon {
	width: 60px;
	height: 60px;
	border-radius: var(--radius-md);
	background: var(--sky-100);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--space-5);
}

.service-card h3 { margin-bottom: var(--space-3); }
.service-card p { font-size: 15.5px; }

.service-card__list {
	margin-top: var(--space-5);
	padding-top: var(--space-5);
	border-top: 1px solid var(--sky-100);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.service-card__list li { font-size: 14px; font-weight: 600; color: var(--navy); padding-left: 20px; position: relative; }
.service-card__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 9px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--coral-deep);
}

/* ============================================================
   15. VISIÓN Y MISIÓN
   ============================================================ */
.vm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.vm-card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-6) var(--space-5); }

.vm-card__tag {
	display: inline-block;
	font-family: var(--font-display);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: var(--radius-pill);
	margin-bottom: var(--space-4);
}
.vm-card__tag--vision { background: var(--vision-tint); color: var(--vision-tag); }
.vm-card__tag--mission { background: var(--mission-tint); color: var(--mission-tag); }

.vm-card__icon {
	width: 48px;
	height: 48px;
	border-radius: var(--radius-md);
	background: var(--sky-100);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--space-4);
}
.vm-card__icon .icon { width: 22px; height: 22px; }

.vm-card h3 { font-size: 17.5px; margin-bottom: var(--space-2); }
.vm-card p { font-size: 14.5px; }

.vm-statement {
	margin-top: var(--space-8);
	text-align: center;
	max-width: 720px;
	margin-inline: auto;
	font-family: var(--font-display);
	font-size: 19px;
	font-weight: 600;
	color: var(--navy-deep);
}

/* ============================================================
   16. FACILIDADES (CHECKLIST)
   ============================================================ */
.checklist {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px 32px;
	max-width: 880px;
	margin-inline: auto;
}
.checklist li {
	display: flex;
	align-items: center;
	background: var(--white);
	border-radius: var(--radius-md);
	padding: 14px 18px;
	font-weight: 600;
	color: var(--navy-deep);
	font-size: 15px;
	box-shadow: var(--shadow-card);
}

.features-list__closing {
	margin-top: var(--space-7);
	text-align: center;
	max-width: 640px;
	margin-inline: auto;
	font-size: 16px;
}

/* ============================================================
   17. POR QUÉ iA4 CLINIC
   ============================================================ */
.why-us__block + .why-us__block { margin-top: var(--space-8); }
.why-us__subheading {
	text-align: center;
	margin-bottom: var(--space-6);
	color: var(--navy);
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.benefit-item {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--white);
	border-radius: var(--radius-md);
	padding: 18px 20px;
	font-weight: 600;
	color: var(--navy-deep);
	font-size: 15px;
	box-shadow: var(--shadow-card);
}
.benefit-item__icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--sky-100);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.benefit-item__icon .icon { width: 20px; height: 20px; }

.diff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.diff-card { text-align: center; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-7) var(--space-5); }
.diff-card__icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--gradient-cta);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto var(--space-5);
}
.diff-card__icon .icon { color: var(--white); }
.diff-card h4 { margin-bottom: var(--space-2); }
.diff-card p { font-size: 14.5px; }

.impact-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.impact-pill { background: var(--sky-100); color: var(--navy); font-weight: 600; font-size: 14px; padding: 10px 20px; border-radius: var(--radius-pill); }

/* ============================================================
   18. CITA DE CIERRE
   ============================================================ */
.quote-section { text-align: center; }
.quote-section .container { max-width: 760px; }
.quote-section__mark { width: 48px; height: 36px; color: var(--sky-300); margin-inline: auto; margin-bottom: var(--space-5); }
.quote-section__text {
	font-family: var(--font-display);
	font-size: clamp(22px, 2.6vw, 30px);
	font-weight: 600;
	color: var(--navy-deep);
	line-height: 1.4;
}
.quote-section__author { margin-top: var(--space-5); font-weight: 600; color: var(--navy); }
.quote-section__tagline { margin-top: var(--space-2); font-size: 14px; color: var(--navy-soft); }
.quote-section .btn { margin-top: var(--space-7); }

/* ============================================================
   19. CONTACTO — FORMULARIO
   ============================================================ */
.contact__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-8); align-items: start; }

.contact__intro p { margin-top: var(--space-4); font-size: 16.5px; }

.contact__reassurance { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.contact__reassurance li { display: flex; align-items: center; font-weight: 600; color: var(--navy); font-size: 14.5px; }

.contact__form-wrap { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); padding: var(--space-7); }

.form-status {
	display: none;
	padding: 13px 18px;
	border-radius: var(--radius-sm);
	font-weight: 600;
	font-size: 14.5px;
	margin-bottom: var(--space-5);
}
.form-status.is-success { display: block; background: var(--success-bg); color: var(--success); }
.form-status.is-error { display: block; background: var(--error-bg); color: var(--error); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }

.form-field { margin-bottom: var(--space-4); display: flex; flex-direction: column; }
.form-field label { font-size: 13.5px; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.form-field input,
.form-field select,
.form-field textarea {
	border: 1.5px solid var(--sky-200);
	border-radius: var(--radius-sm);
	padding: 12px 14px;
	font-size: 15px;
	background: var(--sky-50);
	transition: border-color var(--transition-base), background-color var(--transition-base);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color: var(--coral-deep); background: var(--white); outline: none; }
.form-field textarea { resize: vertical; min-height: 90px; }

.field-error { display: none; margin-top: 6px; font-size: 12.5px; color: var(--error); font-weight: 600; }
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea { border-color: var(--error); }
.form-field.has-error .field-error { display: block; }

/* Honeypot anti-spam: oculto fuera de pantalla (no display:none) para
   que los bots simples lo rellenen igualmente y así detectarlos */
.form-field--honeypot {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
	left: -9999px;
}

.form-field--checkbox { margin-top: var(--space-2); margin-bottom: var(--space-5); }
.checkbox-label { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--navy-soft); cursor: pointer; }
.checkbox-label input[type="checkbox"] { width: 18px; height: 18px; margin-top: 1px; flex-shrink: 0; accent-color: var(--coral-deep); }
.checkbox-label a { color: var(--coral-deep); font-weight: 600; text-decoration: underline; }

/* ============================================================
   20. PIE DE PÁGINA
   ============================================================ */
.site-footer { background: var(--navy-deep); color: rgba(255, 255, 255, 0.72); padding-top: var(--space-8); }

.site-footer__inner { max-width: var(--container-width); margin-inline: auto; padding-inline: 24px; }

.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-7); padding-bottom: var(--space-7); }

.site-footer__logo { height: 90px; width: auto; margin-bottom: var(--space-4); }
.site-footer__tagline { font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.6); }

.site-footer__heading { color: var(--white); font-size: 15px; margin-bottom: var(--space-4); }

.site-footer__links { display: flex; flex-direction: column; gap: var(--space-3); }
.site-footer__links a { font-size: 14.5px; transition: color var(--transition-base); }
.site-footer__links a:hover { color: var(--white); }

.site-footer__contact { display: flex; flex-direction: column; gap: var(--space-4); }
.site-footer__contact-item { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; }
.site-footer__contact-item svg { flex-shrink: 0; margin-top: 2px; color: var(--teal); }
.site-footer__contact-item a { transition: color var(--transition-base); }
.site-footer__contact-item a:hover { color: var(--white); }

.site-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-block: var(--space-5);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-3);
	font-size: 13px;
}
.site-footer__credit a { color: var(--white); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.4); }
.site-footer__credit a:hover { text-decoration-color: var(--white); }

/* ============================================================
   21. RESPONSIVE — TABLET (≤1024px)
   ============================================================ */
@media (max-width: 1024px) {
	.navbar__links {
		display: none;
		position: absolute;
		top: calc(100% + 12px);
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
		background: var(--white);
		border-radius: var(--radius-md);
		box-shadow: var(--shadow-soft);
		padding: 14px;
	}
	.navbar__links.is-open { display: flex; }
	.navbar__links a { display: block; padding: 12px 14px; border-radius: var(--radius-sm); transition: background-color var(--transition-base); }
	.navbar__links a:hover { background: var(--sky-50); }
	.navbar__toggle { display: flex; }

	.hero__inner { grid-template-columns: 1fr; gap: var(--space-6); }
	.hero__visual { order: -1; max-width: 420px; margin-inline: auto; }

	.about__grid { grid-template-columns: 1fr; gap: var(--space-6); }
	.about__visual { order: -1; }

	.vm-grid { grid-template-columns: repeat(2, 1fr); }
	.benefit-grid { grid-template-columns: repeat(2, 1fr); }

	.contact__grid { grid-template-columns: 1fr; gap: var(--space-6); }

	.site-footer__grid { grid-template-columns: 1fr 1fr; }
	.site-footer__col--brand { grid-column: 1 / -1; }
}

/* ============================================================
   22. RESPONSIVE — MÓVIL (≤640px)
   ============================================================ */
@media (max-width: 640px) {
	.container { padding-inline: 18px; }
	.site-header { padding: 14px 0; }
	.navbar { padding: 8px 8px 8px 18px; }

	.section { padding-block: clamp(48px, 12vw, 72px); }
	.section-heading { margin-bottom: var(--space-6); }

	.hero__actions { flex-direction: column; align-items: stretch; }
	.hero__badges { gap: 14px 20px; }

	.stats-grid,
	.services-grid,
	.diff-grid,
	.vm-grid,
	.benefit-grid,
	.checklist { grid-template-columns: 1fr; }

	.orbit { width: 230px; height: 230px; }
	.orbit__center { width: 92px; height: 92px; }
	.orbit__center span { font-size: 11px; }
	.orbit__center .icon,
	.orbit__node .icon { width: 18px; height: 18px; }
	.orbit__node { width: 46px; height: 46px; }

	.form-row { grid-template-columns: 1fr; }
	.contact__form-wrap { padding: var(--space-6) var(--space-5); }

	.site-footer__grid { grid-template-columns: 1fr; gap: var(--space-6); text-align: left; }
	.site-footer__col--brand { grid-column: auto; }
	.site-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
}

/* ============================================================
   23. RESPONSIVE — MÓVIL PEQUEÑO (≤480px)
   ============================================================ */
@media (max-width: 480px) {
	.navbar { padding: 8px 8px 8px 16px; }
	.navbar__cta { padding: 9px 16px; font-size: 13px; }
	.navbar__logo { height: 88px !important; }
  .navbar.is-scrolled .navbar__logo { height: 44px !important; }

	.stat-card { padding: var(--space-6) var(--space-4); }
	.service-card { padding: var(--space-6) var(--space-5); }
	.diff-card { padding: var(--space-6) var(--space-4); }

	.checklist li { font-size: 14px; padding: 12px 14px; }
}