/* ==========================================================================
   Componente — Banda CTA navy de cierre (cta-band).
   Reutilizable en páginas internas. Mismo registro que el CTA de la home pero
   desacoplado de `.home-cta` para poder colocarse en cualquier plantilla.
   ========================================================================== */

.cta-band {
	background: var(--color-navy-deep);
	color: var(--color-cream);
	padding: var(--space-9) 0;
	position: relative;
	overflow: hidden;
}

@media (min-width: 960px) {
	.cta-band {
		padding: var(--space-10) 0;
	}
}

.cta-band::before {
	content: "";
	position: absolute;
	right: -180px;
	top: -180px;
	width: 480px;
	height: 480px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(201, 169, 97, 0.18), transparent 70%);
	pointer-events: none;
}

.cta-band__inner {
	max-width: var(--maxw);
	margin-inline: auto;
	padding: 0 var(--container-pad-x);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-7);
	align-items: center;
	position: relative;
}

@media (min-width: 960px) {
	.cta-band__inner {
		grid-template-columns: 1.4fr 1fr;
		gap: var(--space-8);
	}
}

.cta-band__eyebrow {
	color: var(--color-gold);
	margin-bottom: 18px;
}

.cta-band__title {
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: var(--fz-h2-cta);
	line-height: 1.1;
	color: var(--color-cream);
	letter-spacing: var(--ls-heading);
	margin: var(--space-3) 0 0;
}

.cta-band__title em {
	font-style: italic;
	color: var(--color-gold);
	font-weight: 400;
}

.cta-band__text {
	margin-top: var(--space-5);
	color: var(--color-text-on-navy-muted);
	font-size: var(--fz-lead);
	line-height: var(--lh-long);
	max-width: 48ch;
}

.cta-band__text p {
	color: inherit;
	margin: 0;
}

.cta-band__text p + p {
	margin-top: 0.6em;
}

.cta-band__actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	align-items: flex-start;
}

.cta-band__phone {
	font-family: var(--font-serif);
	font-size: 38px;
	color: var(--color-gold);
	font-weight: 500;
	line-height: 1;
	border-bottom: 1px solid rgba(201, 169, 97, 0.4);
	padding-bottom: 8px;
	transition: color var(--transition-fast);
}

.cta-band__phone:hover,
.cta-band__phone:focus-visible {
	color: var(--color-gold-soft);
}

.cta-band__hours {
	font-size: 13px;
	color: rgba(245, 239, 230, 0.55);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cta-band__button {
	margin-top: var(--space-4);
}

/* --------------------------------------------------------------------------
   Foto del puerto detrás de la banda (dirección "Bocana", 2026-08-24).
   Mismo duotono que el hero pero en variante --muted: aquí la foto es
   ambiente, no asunto. Solo se activa si hay foto de marca cargada; sin ella
   la banda se queda como estaba, navy plano con halo dorado.
   -------------------------------------------------------------------------- */

.cta-band__photo {
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Con foto, el halo dorado de esquina sobra: compite con el duotono. */
.cta-band--has-photo::before {
	display: none;
}

/* Filete de oro que remata el borde superior de la banda. */
.cta-band--has-photo::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 1px;
	z-index: 3;
	background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}

.cta-band--has-photo .cta-band__inner {
	z-index: 3;
}