/**
 * Componente: Estilos de la página de inicio (Home).
 *
 * @package Capello
 */

/* Anulación del padding base de .cap-site-main para que el Hero quede flush contra el header */
.cap-home {
	padding-block: 0;
	margin: 0;
}

/* ============================================================
   1. HERO PRINCIPAL
   ============================================================ */
.cap-hero {
	position: relative;
	inline-size: 100%;
	aspect-ratio: 16 / 9;
	max-block-size: 640px;
	display: flex;
	align-items: center;
	overflow: hidden;
	background-color: var(--c-violeta);
}

.cap-hero__media {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	z-index: 1;
}

.cap-hero__picture {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

.cap-hero__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.cap-hero--no-img {
	background-color: var(--c-violeta);
}

.cap-hero__container {
	position: relative;
	z-index: 3;
	inline-size: 100%;
	display: flex;
	align-items: center;
}

/* Posicionamiento calibrado: inicia a ~22% del ancho para no pisar las llaves ni la casa */
.cap-hero__content {
	margin-inline-start: 22%;
	max-inline-size: 55%;
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}

.cap-hero__title {
	margin: 0;
	font-family: var(--f-display);
	font-size: clamp(2.4rem, 1.7rem + 3.6vw, 3.9rem);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-display);
	color: var(--c-crema);
	text-wrap: balance;
}

.cap-hero__lead {
	margin: 0;
	font-family: var(--f-body);
	font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.45rem);
	line-height: 1.55;
	color: var(--c-crema);
	opacity: 0.92;
}

.cap-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-4);
	margin-block-start: var(--s-6);
}

/* Botones y utilidades de acción */
.cap-btn-whatsapp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	min-block-size: 50px;
	padding: var(--s-4) var(--s-7);
	border: 0;
	border-radius: var(--r-pill);
	background: var(--c-verde);
	color: var(--fg-inverso);
	font-family: var(--f-body);
	font-size: var(--t-body);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-heading);
	text-decoration: none;
	white-space: nowrap;
	box-sizing: border-box;
	transition:
		background-color var(--dur-fast) var(--ease),
		box-shadow var(--dur-fast) var(--ease),
		transform var(--dur-fast) var(--ease);
}

.cap-btn-whatsapp:hover {
	background: color-mix(in srgb, var(--c-verde) 85%, var(--c-tinta));
	color: var(--fg-inverso);
	box-shadow: var(--sh-raised);
	transform: translateY(-1px);
}

.cap-btn-whatsapp:focus-visible {
	outline: 2px solid var(--c-dorado);
	outline-offset: var(--s-1);
}

.cap-btn-icon {
	inline-size: 20px;
	block-size: 20px;
	width: 20px;
	height: 20px;
	display: block;
	flex-shrink: 0;
}

.cap-hero__btn {
	min-block-size: 50px;
	padding: var(--s-4) var(--s-7);
}

.cap-hero__btn--primary {
	border: 1.5px solid var(--c-crema);
}


/* ============================================================
   2. CINTA DE DATOS (SIGNATURE ELEMENT)
   ============================================================ */
.cap-data-strip-wrap {
	position: relative;
	z-index: 10;
	margin-block-start: 0;
	margin-block-end: 0;
	background-color: var(--c-violeta-deep);
	border-block-start: 2px solid var(--c-dorado);
}

.cap-data-strip {
	background-color: transparent;
	border-block-start: none;
	border-radius: 0;
	box-shadow: none;
	padding-block: var(--s-6);
	padding-inline: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-5);
	box-sizing: border-box;
}

.cap-data-strip__header {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
}

.cap-data-strip__eyebrow {
	font-family: var(--f-body);
	font-size: var(--t-eyebrow);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--c-dorado-texto);
}

.cap-data-strip__lead {
	margin: 0;
	font-family: var(--f-body);
	font-size: var(--t-small);
	line-height: var(--lh-heading);
	color: color-mix(in srgb, var(--c-crema) 70%, transparent);
}

.cap-data-strip__grid {
	display: grid;
	grid-template-columns: repeat(4, auto);
	justify-content: space-between;
	align-items: stretch;
	border-block: thin solid color-mix(in srgb, var(--c-crema) 15%, transparent);
}

.cap-data-strip__grid--cols-3 {
	grid-template-columns: repeat(3, auto);
}

.cap-data-strip__grid--cols-2 {
	grid-template-columns: repeat(2, auto);
}

.cap-data-strip__grid--cols-1 {
	grid-template-columns: 1fr;
}

.cap-data-strip__tile {
	padding: var(--s-5) var(--s-4);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	gap: var(--s-3);
	position: relative;
	box-sizing: border-box;
}

.cap-data-strip__tile:first-child {
	padding-inline-start: 0;
}

.cap-data-strip__tile:last-child {
	padding-inline-end: 0;
}

.cap-data-strip__tile + .cap-data-strip__tile {
	border-inline-start: thin solid color-mix(in srgb, var(--c-crema) 15%, transparent);
}

.cap-data-strip__tile-label {
	font-family: var(--f-body);
	font-size: var(--t-eyebrow);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: color-mix(in srgb, var(--c-crema) 70%, transparent);
	line-height: var(--lh-heading);
	min-block-size: calc(2 * var(--t-eyebrow) * var(--lh-heading));
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--s-1);
}

.cap-data-strip__tile-data {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
}

.cap-data-strip__tile-value {
	font-family: var(--f-data);
	font-size: var(--t-h2);
	font-weight: var(--fw-bold);
	line-height: var(--lh-data);
	color: var(--c-crema);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--ls-data);
}

.cap-data-strip__tile-extra {
	font-family: var(--f-body);
	font-size: var(--t-small);
	color: color-mix(in srgb, var(--c-crema) 75%, transparent);
	line-height: 1.3;
}

.cap-data-strip__footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--s-2) var(--s-4);
	font-size: var(--t-small);
	color: color-mix(in srgb, var(--c-crema) 60%, transparent);
}

.cap-data-strip__meta {
	display: inline-block;
}


/* ============================================================
   3. CABECERAS COMUNES DE SECCIÓN
   ============================================================ */
.cap-section-header {
	margin-block-end: var(--s-7);
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
}

.cap-section-eyebrow {
	font-family: var(--f-body);
	font-size: var(--t-eyebrow);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--c-violeta);
}

.cap-section-title {
	margin: 0;
	font-family: var(--f-display);
	font-size: var(--t-h2);
	font-weight: var(--fw-bold);
	line-height: var(--lh-heading);
	letter-spacing: var(--ls-display);
	color: var(--fg-base);
}


/* ============================================================
   4. SECCIÓN C: QUIÉNES SOMOS
   ============================================================ */
.cap-home-about-section {
	padding-block-start: var(--s-9);
	padding-block-end: var(--s-10);
	margin: 0;
}

.cap-home-about {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: var(--s-9);
	align-items: center;
}

.cap-home-about--no-media .cap-home-about__content {
	max-inline-size: 46rem;
}

.cap-home-about__content {
	display: flex;
	flex-direction: column;
	gap: var(--s-5);
	max-inline-size: 48rem;
}

.cap-home-about__content .cap-section-eyebrow {
	margin-block-end: calc(-1 * var(--s-2));
}

.cap-home-about__content .cap-section-title {
	max-inline-size: 34rem;
	text-wrap: balance;
	line-height: var(--lh-heading);
}

.cap-home-about__text {
	margin: 0;
	max-inline-size: 58ch;
	font-size: var(--t-body);
	line-height: 1.75;
	color: var(--fg-muted);
}

.cap-home-about__text p {
	margin-block-end: var(--s-3);
}

.cap-home-about__text p:last-child {
	margin-block-end: 0;
}

.cap-home-about__signature {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-block-start: var(--s-1);
}

.cap-home-about__signature-name {
	font-family: var(--f-display);
	font-size: var(--t-body);
	font-weight: var(--fw-bold);
	color: var(--fg-base);
	line-height: var(--lh-tight);
}

.cap-home-about__signature-title,
.cap-home-about__signature-mat {
	font-family: var(--f-body);
	font-size: var(--t-small);
	font-weight: var(--fw-regular);
	color: var(--fg-muted);
	line-height: var(--lh-body);
	margin: 0;
}

.cap-home-about__quote {
	margin: 0;
	margin-block-start: var(--s-1);
	margin-block-end: var(--s-1);
	padding-inline: var(--s-5) var(--s-5);
	padding-block: var(--s-4);
	max-inline-size: 58ch;
	border-inline-start: 4px solid var(--c-crema);
	background: linear-gradient(90deg, rgba(239, 230, 208, 0.45) 0%, rgba(250, 248, 244, 0) 100%);
	border-radius: 0 var(--r-sm) var(--r-sm) 0;
	display: flex;
	gap: var(--s-3);
	align-items: flex-start;
}

.cap-home-about__quote-mark {
	display: inline-flex;
	flex-shrink: 0;
	color: #D2C4A8;
	margin-block-start: 2px;
}

.cap-home-about__quote-mark svg {
	inline-size: 20px;
	block-size: 20px;
	display: block;
}

.cap-home-about__quote-text {
	margin: 0;
	font-family: var(--f-body);
	font-size: var(--t-body);
	font-style: italic;
	font-weight: var(--fw-medium);
	line-height: 1.7;
	color: var(--fg-base);
}

.cap-home-about__action {
	margin-block-start: var(--s-3);
}

.cap-home-about__btn {
	align-self: flex-start;
}

.cap-home-about__media {
	position: relative;
	inline-size: 100%;
	isolation: isolate;
}

.cap-home-about__media::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--c-violeta);
	border-radius: var(--r-card);
	transform: translate(var(--s-4), var(--s-4));
	z-index: 0;
	pointer-events: none;
}

.cap-home-about__img {
	position: relative;
	z-index: 1;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 1 / 1;
	border-radius: var(--r-card);
	object-fit: cover;
	display: block;
	box-shadow: var(--sh-card);
}


/* ============================================================
   5. SECCIÓN D: PROPIEDADES DESTACADAS
   ============================================================ */
.cap-home-featured-section {
	padding-block: var(--s-9);
	background-color: var(--c-papel);
	margin: 0;
}

.cap-home-featured-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--s-5);
}

.cap-home-featured-action {
	display: flex;
	justify-content: center;
	margin-block-start: var(--s-7);
}


/* ============================================================
   6. SECCIÓN E: NUESTROS SERVICIOS
   ============================================================ */
.cap-servicios-section {
	padding-block-start: var(--s-6);
	padding-block-end: var(--s-9);
	margin: 0;
}

.cap-servicios-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--s-5);
}

.cap-servicio-card {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	padding: var(--s-5);
	background: var(--bg-surface);
	border: thin solid var(--c-linea);
	border-radius: var(--r-card);
	box-shadow: var(--sh-card);
	box-sizing: border-box;
	transition:
		transform var(--dur-fast) var(--ease),
		box-shadow var(--dur-fast) var(--ease);
}

.cap-servicio-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--sh-raised);
}

.cap-servicio-card__icon-wrap {
	inline-size: 60px;
	block-size: 60px;
	border-radius: var(--r-pill); /* Íconos circulares */
	background: var(--c-crema);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--c-violeta);
	flex-shrink: 0;
}

.cap-servicio-card__icon {
	inline-size: 40px;
	block-size: 40px;
	color: var(--c-violeta);
	display: block;
	transition: transform var(--dur-fast) var(--ease);
}

.cap-servicio-card:hover .cap-servicio-card__icon {
	transform: scale(1.08);
}

.cap-servicio-card__icon.cap-icon-custom-64 {
	stroke-width: 2.5;
}

.cap-servicio-card__title {
	margin: 0;
	font-family: var(--f-display);
	font-size: var(--t-h3);
	font-weight: var(--fw-bold);
	line-height: var(--lh-heading);
	color: var(--fg-base);
}

.cap-servicio-card__description {
	margin: 0;
	font-family: var(--f-body);
	font-size: var(--t-small);
	line-height: var(--lh-body);
	color: var(--fg-muted);
}


/* ============================================================
   7. SECCIÓN F: CONTACTO DIRECTO Y CANALES
   ============================================================ */
.cap-contacto-section {
	padding-block: var(--s-9);
	background-color: var(--bg-page);
	margin: 0;
}

.cap-contacto-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s-8);
	align-items: start;
}

.cap-contacto-col--info {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}

.cap-contacto-title {
	margin: 0;
	font-family: var(--f-display);
	font-size: var(--t-h2);
	font-weight: var(--fw-bold);
	line-height: var(--lh-heading);
	letter-spacing: var(--ls-display);
	color: var(--fg-base);
	max-inline-size: 26ch;
	text-wrap: balance;
}

.cap-contacto-desc {
	margin: 0;
	font-family: var(--f-body);
	font-size: var(--t-body);
	line-height: var(--lh-body);
	color: var(--fg-muted);
	max-inline-size: 46ch;
}

.cap-contacto-channel-list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
}

.cap-contacto-channel-item {
	padding-block: var(--s-4);
}

.cap-contacto-channel-item:first-child {
	padding-block-start: 0;
}

.cap-contacto-channel-item:not(:last-child) {
	border-block-end: thin solid var(--c-linea);
}

.cap-contacto-channel-link {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	text-decoration: none;
	color: var(--fg-base);
	transition: color var(--dur-fast) var(--ease);
}

.cap-contacto-channel-icon-wrap {
	inline-size: 46px;
	block-size: 46px;
	border-radius: var(--r-pill);
	background-color: var(--c-violeta);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--c-crema);
	flex-shrink: 0;
	box-shadow: var(--sh-card);
	transition:
		background-color var(--dur-fast) var(--ease),
		transform var(--dur-fast) var(--ease);
}

.cap-contacto-channel-icon {
	inline-size: 22px;
	block-size: 22px;
	color: var(--c-crema);
	display: block;
}

.cap-contacto-channel-link:hover .cap-contacto-channel-icon-wrap {
	background-color: var(--c-violeta-soft);
	transform: scale(1.05);
}

.cap-contacto-channel-link:hover .cap-contacto-channel-val {
	color: var(--c-violeta);
}

.cap-contacto-channel-content {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cap-contacto-channel-label {
	font-family: var(--f-body);
	font-size: var(--t-eyebrow);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--fg-muted);
}

.cap-contacto-channel-val {
	font-family: var(--f-body);
	font-size: var(--t-body);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-heading);
	color: var(--fg-base);
	transition: color var(--dur-fast) var(--ease);
}

.cap-contacto-social {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--s-3);
	margin-block-start: var(--s-5);
	padding-block-start: var(--s-4);
	border-block-start: thin solid var(--c-linea);
}

.cap-contacto-social-title {
	margin: 0;
	font-family: var(--f-body);
	font-size: var(--t-small);
	color: var(--fg-muted);
}

.cap-contacto-social-links {
	display: flex;
	align-items: center;
	gap: var(--s-5);
	flex-wrap: wrap;
}

.cap-contacto-social-link {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	text-decoration: none;
	color: var(--fg-base);
	font-family: var(--f-body);
	font-size: var(--t-small);
	font-weight: var(--fw-semibold);
	white-space: nowrap;
	transition: color var(--dur-fast) var(--ease);
}

.cap-contacto-social-icon-wrap {
	inline-size: 34px;
	block-size: 34px;
	border-radius: var(--r-pill);
	background-color: var(--c-violeta);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--c-crema);
	flex-shrink: 0;
	box-shadow: var(--sh-card);
	transition:
		background-color var(--dur-fast) var(--ease),
		transform var(--dur-fast) var(--ease);
}

.cap-contacto-social-icon {
	inline-size: 16px;
	block-size: 16px;
	color: var(--c-crema);
	display: block;
}

.cap-contacto-social-link:hover .cap-contacto-social-icon-wrap {
	background-color: var(--c-violeta-soft);
	transform: scale(1.05);
}

.cap-contacto-social-link:hover {
	color: var(--c-violeta);
}


/* ============================================================
   8. SECCIÓN G: CTA FORMULARIO VENDER (CARD DE CAPTACIÓN)
   ============================================================ */
.cap-home-contacto-section {
	padding-block-start: var(--s-8);
	padding-block-end: var(--s-9);
	background-color: var(--bg-inverso);
	color: var(--fg-inverso);
	margin: 0;
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.cap-home-contacto-section::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--cap-contacto-bg);
	background-repeat: no-repeat;
	background-position: left -20px bottom;
	background-size: auto 95%;
	opacity: 0.4;
	mix-blend-mode: screen;
	pointer-events: none;
	z-index: -1;
}

.cap-home-contacto {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-inline: auto;
	max-inline-size: 42rem;
}

.cap-home-contacto__header {
	margin-block-end: var(--s-5);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	inline-size: 100%;
}

.cap-home-contacto__eyebrow {
	color: var(--c-dorado-texto);
	text-align: center;
}

.cap-home-contacto__title {
	color: var(--c-crema);
	max-inline-size: 26ch;
	text-wrap: balance;
	text-align: center;
	margin-inline: auto;
}

.cap-home-contacto__lead {
	color: color-mix(in srgb, var(--c-crema) 80%, transparent);
	margin-block-start: var(--s-1);
	font-size: var(--t-body);
	text-wrap: balance;
	text-align: center;
	margin-inline: auto;
}

/* Card contenedora del formulario */
.cap-vender-form {
	inline-size: 100%;
	background-color: color-mix(in srgb, var(--c-violeta-deep) 85%, transparent);
	border: 1px solid var(--border-base);
	border: 1px solid color-mix(in srgb, var(--c-crema) 14%, transparent);
	border-block-start: 2px solid var(--c-dorado);
	border-radius: var(--r-card);
	padding: var(--s-7) var(--s-7);
	box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-sizing: border-box;
}

.cap-vender-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.cap-vender-form__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--s-5) var(--s-4);
	text-align: start;
}

.cap-vender-form__group {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
}

.cap-vender-form__group--ubicacion,
.cap-vender-form__group--detalles,
.cap-vender-form__group--action {
	grid-column: 1 / -1;
}

.cap-vender-form__label {
	font-family: var(--f-body);
	font-size: var(--t-eyebrow);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: color-mix(in srgb, var(--c-crema) 75%, transparent);
	margin-block-end: 2px;
}

.cap-vender-form__req {
	color: var(--c-dorado-texto);
}

/* Campos de entrada: estructura sólida y uniforme */
.cap-vender-form__input,
.cap-vender-form__select,
.cap-vender-form__textarea {
	inline-size: 100%;
	min-block-size: 48px;
	padding: 0 var(--s-4);
	border: 1px solid var(--border-base);
	border: 1px solid color-mix(in srgb, var(--c-crema) 18%, transparent);
	border-radius: var(--r-sm);
	background-color: rgba(255, 255, 255, 0.05);
	color: var(--c-crema);
	font-family: var(--f-body);
	font-size: var(--t-body);
	line-height: var(--lh-body);
	box-sizing: border-box;
	transition:
		border-color var(--dur-fast) var(--ease),
		background-color var(--dur-fast) var(--ease),
		box-shadow var(--dur-fast) var(--ease);
}

.cap-vender-form__input::placeholder,
.cap-vender-form__textarea::placeholder {
	color: color-mix(in srgb, var(--c-crema) 35%, transparent);
}

/* Select con flecha SVG integrada y alineación idéntica */
.cap-vender-form__select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23D9A040' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-inline-end: calc(var(--s-6) + var(--s-3));
	cursor: pointer;
}

.cap-vender-form__select option {
	background-color: var(--c-violeta-deep);
	color: var(--c-crema);
	padding: var(--s-2);
}

/* Estados de foco accesibles y luminosos */
.cap-vender-form__input:focus,
.cap-vender-form__select:focus,
.cap-vender-form__textarea:focus,
.cap-vender-form__input:focus-visible,
.cap-vender-form__select:focus-visible,
.cap-vender-form__textarea:focus-visible {
	outline: none;
	border-color: var(--c-dorado-texto);
	background-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-dorado) 22%, transparent);
}

.cap-vender-form__textarea {
	padding-block: var(--s-3);
	min-block-size: 100px;
	resize: vertical;
}

.cap-vender-form__group--action {
	margin-block-start: var(--s-3);
}

.cap-vender-form__submit {
	inline-size: 100%;
	min-block-size: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	font-size: var(--t-body);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.02em;
	cursor: pointer;
}

/* Botón en estado de carga o deshabilitado */
.cap-vender-form__submit:disabled,
.cap-vender-form__submit[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
	pointer-events: none;
}

/* Estados de error de validación en inputs */
.cap-vender-form__input.has-error,
.cap-vender-form__select.has-error,
.cap-vender-form__textarea.has-error,
.cap-vender-form__input[aria-invalid="true"],
.cap-vender-form__select[aria-invalid="true"],
.cap-vender-form__textarea[aria-invalid="true"] {
	border-color: color-mix(in srgb, var(--c-error) 65%, transparent);
	border-block-end-color: var(--c-error);
	border-block-end-width: 2px;
	box-shadow: 0 1px 0 var(--c-error);
}

.cap-vender-form__input.has-error:focus,
.cap-vender-form__select.has-error:focus,
.cap-vender-form__textarea.has-error:focus {
	border-color: var(--c-error);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-error) 25%, transparent);
}

/* Mensaje de error contextual debajo del campo */
.cap-form-error {
	display: block;
	color: var(--c-error);
	font-family: var(--f-body);
	font-size: var(--t-small);
	line-height: var(--lh-heading);
	margin-block-start: var(--s-1);
	font-weight: var(--fw-medium);
}

/* Bloque de mensaje de éxito */
.cap-vender-success {
	inline-size: 100%;
	background-color: color-mix(in srgb, var(--c-violeta-deep) 85%, transparent);
	border: 1px solid var(--border-base);
	border: 1px solid color-mix(in srgb, var(--c-crema) 14%, transparent);
	border-block-start: 2px solid var(--c-dorado);
	border-radius: var(--r-card);
	padding: var(--s-8) var(--s-7);
	box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--s-3);
}

.cap-vender-success__icon-wrap {
	inline-size: 64px;
	block-size: 64px;
	border-radius: var(--r-pill);
	background-color: var(--c-verde);
	color: var(--c-crema);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-block-end: var(--s-2);
}

.cap-vender-success__icon {
	inline-size: 32px;
	block-size: 32px;
}

.cap-vender-success__title {
	font-family: var(--f-display);
	font-size: var(--t-h3);
	color: var(--c-crema);
	margin: 0;
	line-height: var(--lh-heading);
}

.cap-vender-success__text {
	font-family: var(--f-body);
	font-size: var(--t-body);
	color: color-mix(in srgb, var(--c-crema) 80%, transparent);
	margin: 0;
	line-height: var(--lh-body);
}


/* ============================================================
   9. REVEAL PROGRESSIVE ENHANCEMENT & STAGGER
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
	/* Hero: Entrada escalonada al cargar la página */
	.cap-has-reveal .cap-hero__title {
		opacity: 0;
		transform: translateY(16px);
		animation: cap-hero-fade-in var(--dur-slow) var(--ease) 100ms forwards;
	}

	.cap-has-reveal .cap-hero__lead {
		opacity: 0;
		transform: translateY(16px);
		animation: cap-hero-fade-in var(--dur-slow) var(--ease) calc(100ms + var(--stagger)) forwards;
	}

	.cap-has-reveal .cap-hero__actions {
		opacity: 0;
		transform: translateY(16px);
		animation: cap-hero-fade-in var(--dur-slow) var(--ease) calc(100ms + calc(var(--stagger) * 2)) forwards;
	}

	@keyframes cap-hero-fade-in {
		from {
			opacity: 0;
			transform: translateY(16px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/* Secciones: Fade-in con translateY(24px) */
	.cap-has-reveal .cap-reveal {
		opacity: 0;
		transform: translateY(24px);
		transition:
			opacity var(--dur-slow) var(--ease),
			transform var(--dur-slow) var(--ease);
	}

	.cap-has-reveal .cap-reveal.is-revealed {
		opacity: 1;
		transform: translateY(0);
	}

	/* Cinta de datos: Stagger por tile */
	.cap-has-reveal .cap-data-strip__tile {
		opacity: 0;
		transform: translateY(16px);
		transition:
			opacity var(--dur-slow) var(--ease),
			transform var(--dur-slow) var(--ease);
		transition-delay: calc(var(--tile-index, 0) * var(--stagger));
	}

	.cap-has-reveal .cap-reveal.is-revealed .cap-data-strip__tile,
	.cap-has-reveal .cap-data-strip-wrap.is-revealed .cap-data-strip__tile {
		opacity: 1;
		transform: translateY(0);
	}

	/* Quiénes somos: Escala sutil en imagen al entrar */
	.cap-has-reveal .cap-home-about__img {
		transform: scale(1.04);
		transition: transform var(--dur-slow) var(--ease);
	}

	.cap-has-reveal .cap-reveal.is-revealed .cap-home-about__img {
		transform: scale(1);
	}

	/* Servicios: Stagger en las 4 cards */
	.cap-has-reveal .cap-servicio-card {
		opacity: 0;
		transform: translateY(20px);
		transition:
			opacity var(--dur-slow) var(--ease),
			transform var(--dur-slow) var(--ease),
			box-shadow var(--dur-fast) var(--ease);
	}

	.cap-has-reveal .cap-reveal.is-revealed .cap-servicio-card:nth-child(1) {
		opacity: 1;
		transform: translateY(0);
		transition-delay: calc(var(--stagger) * 1);
	}

	.cap-has-reveal .cap-reveal.is-revealed .cap-servicio-card:nth-child(2) {
		opacity: 1;
		transform: translateY(0);
		transition-delay: calc(var(--stagger) * 2);
	}

	.cap-has-reveal .cap-reveal.is-revealed .cap-servicio-card:nth-child(3) {
		opacity: 1;
		transform: translateY(0);
		transition-delay: calc(var(--stagger) * 3);
	}

	.cap-has-reveal .cap-reveal.is-revealed .cap-servicio-card:nth-child(4) {
		opacity: 1;
		transform: translateY(0);
		transition-delay: calc(var(--stagger) * 4);
	}

	/* Accesibilidad / Navegación por teclado */
	.cap-has-reveal .cap-reveal:focus-within,
	.cap-has-reveal .cap-reveal:focus-within * {
		opacity: 1 !important;
		transform: none !important;
		visibility: visible !important;
	}
}


/* Ajuste de escala para tablet/laptop (1024px) con cifras ARS largas */
@media (max-width: 68rem) {
	.cap-data-strip__tile-value {
		font-size: var(--t-h3);
	}

	.cap-data-strip__tile {
		padding-inline: var(--s-3);
	}
}


/* ============================================================
   10. RESPONSIVO: BREAKPOINT ÚNICO 48REM (MOBILE)
   ============================================================ */
@media (max-width: 48rem) {
	.cap-hero {
		aspect-ratio: auto;
		min-block-size: 580px;
		max-block-size: none;
		align-items: center;
		padding-block-start: clamp(5.5rem, 12vh, 7.5rem);
		padding-block-end: var(--s-8);
	}

	.cap-hero__media::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(
			180deg,
			color-mix(in srgb, var(--c-violeta-deep) 92%, transparent) 0%,
			color-mix(in srgb, var(--c-violeta) 80%, transparent) 50%,
			color-mix(in srgb, var(--c-violeta) 30%, transparent) 75%,
			transparent 100%
		);
		pointer-events: none;
		z-index: 2;
	}

	.cap-hero__container {
		padding-block: 0;
		justify-content: center;
		inline-size: 100%;
	}

	.cap-hero__content {
		margin-inline: auto;
		max-inline-size: 100%;
		align-items: center;
		text-align: center;
		gap: var(--s-3);
	}

	.cap-hero__title {
		font-size: clamp(2.1rem, 1.6rem + 3.2vw, 2.75rem);
		line-height: var(--lh-tight);
		text-align: center;
		margin-inline: auto;
		max-inline-size: 16ch;
		text-wrap: balance;
	}

	.cap-hero__lead {
		text-align: center;
		margin-inline: auto;
		max-inline-size: 26ch;
		text-wrap: balance;
		font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.35rem);
		line-height: 1.5;
		opacity: 0.92;
	}

	.cap-hero__actions {
		flex-direction: column;
		align-items: center;
		margin-block-start: var(--s-5);
		gap: var(--s-3);
		inline-size: 100%;
	}

	.cap-hero__btn {
		inline-size: 100%;
		max-inline-size: 20rem;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-block-size: 50px;
		padding: var(--s-4) var(--s-7);
	}

	/* Cinta de datos en mobile: 2x2 */
	.cap-data-strip-wrap {
		margin-block-start: 0;
		margin-block-end: 0;
	}

	.cap-data-strip {
		padding-block: var(--s-5);
		padding-inline: 0;
		gap: var(--s-4);
	}

	.cap-data-strip__header {
		align-items: center;
		text-align: center;
	}

	.cap-data-strip__lead {
		text-wrap: balance;
		margin-inline: auto;
		max-inline-size: 32ch;
	}

	.cap-data-strip__grid {
		grid-template-columns: repeat(2, 1fr);
		justify-content: stretch;
	}

	.cap-data-strip__tile {
		padding: var(--s-4) var(--s-3);
		gap: var(--s-2);
	}

	.cap-data-strip__tile:first-child {
		padding-inline-start: var(--s-3);
	}

	.cap-data-strip__tile:last-child {
		padding-inline-end: var(--s-3);
	}

	.cap-data-strip__tile-label {
		white-space: normal;
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: var(--s-1);
		line-height: var(--lh-heading);
		min-block-size: calc(2 * var(--t-eyebrow) * var(--lh-heading));
	}

	.cap-data-strip__tile-value {
		font-size: var(--t-h3);
		white-space: nowrap;
	}

	.cap-data-strip__tile + .cap-data-strip__tile {
		border-inline-start: none;
	}

	.cap-data-strip__tile:nth-child(even) {
		border-inline-start: thin solid color-mix(in srgb, var(--c-crema) 15%, transparent);
	}

	.cap-data-strip__tile:nth-child(n+3) {
		border-block-start: thin solid color-mix(in srgb, var(--c-crema) 15%, transparent);
	}

	.cap-data-strip__footer {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: var(--s-1);
	}

	/* Secciones de la home en mobile */
	.cap-data-strip-section,
	.cap-contacto-section,
	.cap-home-contacto-section,
	.cap-home-featured-section {
		padding-block: var(--s-7);
	}

	.cap-home-about-section {
		padding-block-start: var(--s-7);
		padding-block-end: var(--s-8);
	}

	.cap-servicios-section {
		padding-block-start: var(--s-7);
		padding-block-end: var(--s-8);
	}

	.cap-home-about {
		grid-template-columns: 1fr;
		gap: var(--s-6);
	}

	.cap-home-about__media {
		max-inline-size: 380px;
		margin-inline: auto;
		margin-block-end: var(--s-4);
	}

	.cap-home-about__media::before {
		transform: translate(var(--s-3), var(--s-3));
	}

	.cap-contacto-grid {
		grid-template-columns: 1fr;
		gap: var(--s-7);
	}

	.cap-contacto-channel-item {
		padding-block: var(--s-3);
	}

	.cap-contacto-channel-icon-wrap {
		inline-size: 40px;
		block-size: 40px;
	}

	.cap-contacto-channel-icon {
		inline-size: 20px;
		block-size: 20px;
	}

	.cap-contacto-channel-val {
		font-size: var(--t-body);
		font-weight: var(--fw-semibold);
		overflow-wrap: anywhere;
	}

	.cap-contacto-social {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--s-3);
	}

	.cap-home-contacto-section::after {
		display: none;
	}

	.cap-home-contacto {
		margin-inline: auto;
		align-items: center;
	}

	.cap-home-contacto__header {
		align-items: center;
		text-align: center;
	}

	.cap-home-contacto__lead {
		white-space: normal;
		text-wrap: balance;
	}

	.cap-vender-form {
		padding: var(--s-5) var(--s-4);
	}

	.cap-vender-form__grid {
		grid-template-columns: 1fr;
		gap: var(--s-4);
	}

	.cap-home-featured-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--s-4);
	}

	.cap-servicios-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--s-4);
	}
}

@media (max-width: 32rem) {
	.cap-home-featured-grid,
	.cap-servicios-grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   11. SCROLL MARGIN OFFSET PARA ANCLAS CON HEADER STICKY
   ============================================================ */
#quienes-somos,
#contacto,
#quiero-vender {
	scroll-margin-block-start: calc(5rem + var(--s-5));
}

@media (max-width: 48rem) {
	#quienes-somos,
	#contacto,
	#quiero-vender {
		scroll-margin-block-start: calc(4.5rem + var(--s-4));
	}
}