/* ==========================================================================
   components.css — Vocabulario visual base. Fase 1: solo el BOTÓN.
   DESIGN §5: ghost (texto, radio 0) y outline (borde 1px, radio 20px).
   Estados definidos a mano (hover / focus-visible / active). Sin defaults.
   ========================================================================== */

.btn {
  --btn-pad-y: var(--spacing-12);
  --btn-pad-x: var(--spacing-24);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  font-family: var(--font-body);
  font-weight: var(--font-weight-bold);
  font-variation-settings: "wght" 700;
  font-size: var(--text-body);
  line-height: 1;
  text-align: center;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-pure-black);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn:focus-visible {
  outline: 2px solid var(--color-pure-black);
  outline-offset: 3px;
}
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Ghost (solo texto, radio 0) — navegación y acciones secundarias ---- */
.btn--ghost {
  border-radius: var(--radius-cards); /* 0px */
  padding: var(--spacing-8) var(--spacing-4);
  text-underline-offset: 4px;
}
.btn--ghost:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.btn--ghost:active { opacity: .6; }

/* --- Sólido (pill negro) — CTA primario, estilo Lightship --------------- */
.btn--solid {
  background: var(--color-pure-black);
  color: var(--color-bg);
  border-color: var(--color-pure-black);
  border-radius: var(--radius-full);
}
.btn--solid:hover { background: #1f1f1f; border-color: #1f1f1f; }
.btn--solid:active { transform: translateY(1px); }

/* Invertido (pill blanco) — CTA sobre superficies oscuras / vídeo. */
.btn--invert {
  background: var(--color-paper-white); color: var(--color-pure-black);
  border-color: var(--color-paper-white); border-radius: var(--radius-full);
}
.btn--invert:hover { background: #fff; border-color: #fff; }
.btn--invert:active { transform: translateY(1px); }
.btn__arrow { transition: transform .2s ease; }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* --- Outline (borde 1px, pill) — acciones secundarias de alto contraste -- */
.btn--outline {
  border-color: var(--color-pure-black);
  border-radius: var(--radius-full);
}
.btn--outline:hover {
  background: var(--color-pure-black);
  color: var(--color-bg);
}
.btn--outline:active {
  background: var(--color-pure-black);
  color: var(--color-bg);
  transform: translateY(1px);
}

/* --- Variantes claras (sobre superficie oscura) ------------------------- */
.btn--ghost.btn--light { color: var(--color-paper-white); }

.btn--outline.btn--light {
  border-color: var(--color-paper-white);
  color: var(--color-paper-white);
}
.btn--outline.btn--light:hover,
.btn--outline.btn--light:active {
  background: var(--color-paper-white);
  color: var(--color-pure-black);
}
.btn--light:focus-visible { outline-color: var(--color-paper-white); }

/* ==========================================================================
   Vocabulario compartido (ficha, catálogo, home). Monocromo. Sin sombras.
   ========================================================================== */

/* --- Breadcrumb --------------------------------------------------------- */
.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-8);
	padding-top: var(--spacing-24);
	font-size: var(--text-body-sm);
	color: var(--color-text-muted);
}
.breadcrumb a { color: var(--color-text-muted); text-underline-offset: 3px; }
.breadcrumb a:hover { color: var(--color-pure-black); text-decoration: underline; }
.breadcrumb__sep { color: var(--color-outline-gray); }
.breadcrumb__current { color: var(--color-pure-black); }

/* --- Badge de estado (monocromo) --------------------------------------- */
.badge {
	display: inline-block;
	font-size: var(--text-caption);
	font-weight: var(--font-weight-bold);
	font-variation-settings: "wght" 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: var(--spacing-4) var(--spacing-8);
	border: 1px solid var(--color-pure-black);
	border-radius: 0;
	line-height: 1.25;
	background: transparent;
	color: var(--color-pure-black);
}
.badge--vendido { background: #d62828; border-color: #d62828; color: #fff; }
.badge--reservado { background: transparent; color: var(--color-pure-black); }

/* --- Precio (cifra de impacto + ÚNICO acento naranja del viewport) ------ */
.price {
	display: flex;
	align-items: center;
	gap: var(--spacing-16);
	margin-block: var(--spacing-24);
}
.price__accent {
	flex: 0 0 auto;
	width: var(--spacing-20);
	height: var(--spacing-20);
	background: var(--color-action-orange); /* el único naranja de la ficha */
}
.price__figure { display: block; }
.price__figure--ask { color: var(--color-pure-black); }

/* --- Tabla de specs (filas hairline) ----------------------------------- */
.spec-table {
	display: grid;
	grid-template-columns: 1fr;
	border-top: 1px solid var(--color-outline-gray);
}
.spec-table__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--spacing-16);
	padding-block: var(--spacing-12);
	border-bottom: 1px solid var(--color-outline-gray);
}
.spec-table__label { font-size: var(--text-body-sm); color: var(--color-text-muted); }
.spec-table__value { font-weight: var(--font-weight-bold); font-variation-settings: "wght" 700; text-align: right; }
@media (min-width: 768px) {
	.spec-table { grid-template-columns: 1fr 1fr; column-gap: var(--spacing-40); }
}

/* Sección de superficie negra (alto contraste B/N — design.md §2) */
.section--dark { background: var(--color-pure-black); color: var(--color-paper-white); }

/* Tabla de specs sobre negro */
.spec-table--dark { border-top-color: #333; }
.spec-table--dark .spec-table__row { border-bottom-color: #333; }
.spec-table--dark .spec-table__label { color: var(--color-medium-gray); }
.spec-table--dark .spec-table__value { color: var(--color-paper-white); }

/* --- Lista de equipamiento --------------------------------------------- */
.equip-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-8) var(--spacing-40);
}
.equip-list__item {
	position: relative;
	padding-left: var(--spacing-20);
	font-size: var(--text-body);
	line-height: 1.4;
}
.equip-list__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: var(--spacing-8);
	height: 1px;
	background: var(--color-pure-black);
}
@media (min-width: 600px) { .equip-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .equip-list { grid-template-columns: 1fr 1fr 1fr; } }

/* --- Rejilla y tarjeta de coche ---------------------------------------- */
.car-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--spacing-40) var(--spacing-24);
}
.car-card { background: transparent; border-radius: var(--radius-cards); }
/* Stagger del reveal cuando las tarjetas están en una rejilla. */
.car-grid > .car-card:nth-child(2) { --reveal-delay: .08s; }
.car-grid > .car-card:nth-child(3) { --reveal-delay: .16s; }
.car-grid > .car-card:nth-child(4) { --reveal-delay: .24s; }
.car-card__link { display: block; color: inherit; }
.car-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radius-images); /* 20px: la foto vive en su marco */
	background: var(--color-canvas);
	border: 1px solid var(--color-outline-gray);
}
.car-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 70%;
	transition: transform .4s ease;
}
.car-card__link:hover .car-card__img { transform: scale(1.04); }
.car-card__noimg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.car-card__state { position: absolute; top: var(--spacing-12); left: var(--spacing-12); }
.car-card__body { padding-top: var(--spacing-16); }
.car-card__kicker { color: var(--color-text-muted); letter-spacing: .08em; margin-bottom: var(--spacing-4); }
.car-card__title { margin-bottom: var(--spacing-8); }
.car-card__specs { margin-bottom: var(--spacing-8); }
.car-card__price { font-weight: var(--font-weight-bold); font-variation-settings: "wght" 700; }
.car-card__link:focus-visible { outline: 2px solid var(--color-pure-black); outline-offset: 4px; }

/* --- Input/select pastilla (design.md §5) — base de los filtros --------- */
.pill { position: relative; display: inline-flex; }
.pill select {
	appearance: none; -webkit-appearance: none;
	font-family: var(--font-body); font-size: var(--text-body-sm); line-height: 1.2;
	color: var(--color-pure-black); background: transparent;
	border: 1px solid var(--color-pure-black); border-radius: var(--radius-full);
	padding: var(--spacing-12) var(--spacing-40) var(--spacing-12) var(--spacing-24);
	cursor: pointer; width: 100%;
}
.pill::after {
	content: ""; position: absolute; right: var(--spacing-20); top: 50%;
	width: 7px; height: 7px;
	border-right: 1.5px solid var(--color-pure-black); border-bottom: 1.5px solid var(--color-pure-black);
	transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.pill select:hover { background: var(--color-paper-white); }
.pill select:focus-visible { outline: 2px solid var(--color-pure-black); outline-offset: 2px; }

/* --- WhatsApp: verde de marca, oscurecido para cumplir contraste AA -----
   (decisión de Carlos; texto blanco. #0e7a3a sobre blanco = 5.4:1 ≥ 4.5). */
.is-whatsapp { background-color: #0e7a3a !important; color: #fff !important; border-color: #0e7a3a !important; }
.is-whatsapp:hover { background-color: #0b6e34 !important; border-color: #0b6e34 !important; color: #fff !important; }
.is-whatsapp:focus-visible { outline-color: #0b6e34 !important; }

/* Excepción: en HEADER y FOOTER el WhatsApp va en el naranja del proyecto,
   oscurecido para contraste AA con texto blanco (#c8451f = 4.85:1 ≥ 4.5). */
.navlink--cta.is-whatsapp, .site-footer__cta.is-whatsapp {
  background-color: #c8451f !important;
  border-color: #c8451f !important;
  color: #fff !important;
}
.navlink--cta.is-whatsapp:hover, .site-footer__cta.is-whatsapp:hover {
  background-color: #b23c19 !important; border-color: #b23c19 !important; color: #fff !important;
}
/* En el menú móvil: texto naranja. */
.site-menu a.is-whatsapp { background: none !important; color: #c8451f !important; }

/* Icono de WhatsApp a la izquierda de cualquier botón de WhatsApp. */
.is-whatsapp {
  display: inline-flex !important; align-items: center; gap: var(--spacing-8);
  --wa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.247-.694.247-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.999-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.885-9.885 9.885M20.52 3.449C18.24 1.245 15.24 0 12.045 0 5.463 0 .104 5.36.101 11.945c0 2.096.547 4.142 1.588 5.945L0 24l6.335-1.652a11.93 11.93 0 005.71 1.448h.006c6.585 0 11.946-5.36 11.949-11.945a11.9 11.9 0 00-3.495-8.404z'/%3E%3C/svg%3E");
}
.is-whatsapp::before {
  content: ""; flex: 0 0 auto; width: 1.15em; height: 1.15em;
  background-color: currentColor;
  -webkit-mask: var(--wa-icon) center / contain no-repeat;
  mask: var(--wa-icon) center / contain no-repeat;
}

/* --- Banda de contacto con textura de "+" (referencia Lightship) -------- */
.cta-band {
	position: relative;
	background-color: var(--color-paper-white);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M24 19v10M19 24h10' stroke='%23d9d9d9' stroke-width='1'/%3E%3C/svg%3E");
	background-size: 48px 48px;
	border-radius: var(--radius-images);
	padding: clamp(40px, 7vw, 88px);
	display: grid; gap: var(--spacing-40);
}
@media (min-width: 800px) { .cta-band { grid-template-columns: 1fr auto; align-items: center; column-gap: var(--spacing-64); } }
.cta-band__kicker { font-size: var(--text-body-sm); color: var(--color-text-muted); letter-spacing: .04em; margin-bottom: var(--spacing-12); }
.cta-band__title { letter-spacing: var(--tracking-heading-sm); max-width: 22ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--spacing-12); }

/* --- Barra inferior fija: precio + CTA (único naranja, estilo Lightship) -- */
.buybar {
	position: fixed; left: 0; right: 0; bottom: var(--spacing-16); z-index: 40;
	display: flex; justify-content: center; padding-inline: var(--spacing-16);
	pointer-events: none;
	transform: translateY(180%);
	transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.buybar.is-visible { transform: none; }
.buybar__inner {
	pointer-events: auto;
	display: flex; align-items: center; gap: var(--spacing-16);
	background: var(--color-pure-black); color: var(--color-bg);
	border-radius: var(--radius-full);
	padding: var(--spacing-8) var(--spacing-8) var(--spacing-8) var(--spacing-24);
	max-width: 100%;
}
.buybar__info { display: flex; align-items: baseline; gap: var(--spacing-12); min-width: 0; }
.buybar__name { font-size: var(--text-body-sm); color: var(--color-outline-gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34vw; }
.buybar__price { font-weight: var(--font-weight-bold); font-variation-settings: "wght" 700; white-space: nowrap; }
.buybar__cta {
	display: inline-flex; align-items: center; gap: var(--spacing-8);
	background: var(--color-action-orange); color: var(--color-pure-black);
	border-radius: var(--radius-full); padding: var(--spacing-12) var(--spacing-20);
	font-weight: var(--font-weight-bold); font-variation-settings: "wght" 700; white-space: nowrap;
}
.buybar__cta:hover { filter: brightness(1.04); }
.buybar__cta:focus-visible { outline: 2px solid var(--color-bg); outline-offset: 2px; }
/* Móvil: la barra fija muestra solo el CTA (sin nombre ni precio). */
@media (max-width: 760px) {
	.buybar__info { display: none; }
	.buybar__inner { width: 100%; background: none; padding: 0; }
	.buybar__cta { flex: 1 1 auto; justify-content: center; }
}