/* ==========================================================================
   Constructora Bolívar — Componentes
   Capa de componentes reutilizables (botones, inputs, select, budget/slider).
   Requiere tokens.css. Engánchalos juntos:
     <link rel="stylesheet" href="tokens.css">
     <link rel="stylesheet" href="components.css">
   ========================================================================== */

/* ==========================================================================
   BOTÓN  ·  .cb-btn
   ========================================================================== */
.cb-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--cb-button-gap); min-width: var(--cb-button-min-width);
  border-radius: var(--cb-button-radius); border: 1px solid transparent;
  font-family: var(--cb-button-font-family); font-size: var(--cb-button-font-size);
  font-weight: var(--cb-button-font-weight); line-height: var(--cb-button-line-height);
  letter-spacing: var(--cb-button-letter-spacing);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.cb-btn__icon { width: var(--cb-button-icon-size); height: var(--cb-button-icon-size); flex: none; }

/* tamaños · LG sin altura fija: el padding da 48 con icono / 44 solo texto */
.cb-btn--lg { padding: var(--cb-button-lg-padding-y) var(--cb-button-lg-padding-x); }
.cb-btn--sm { height: var(--cb-button-sm-height); padding: var(--cb-button-sm-padding-y) var(--cb-button-sm-padding-x); }

/* Main (primario) */
.cb-btn--main { background: var(--cb-button-main-bg); color: var(--cb-button-main-fg); border-color: var(--cb-button-main-bg); }
.cb-btn--main:hover { background: var(--cb-button-main-bg-hover); border-color: var(--cb-button-main-bg-hover); }
.cb-btn--main:active { background: var(--cb-button-main-bg-active); border-color: var(--cb-button-main-bg-active); }
.cb-btn--main:disabled { background: var(--cb-button-main-bg-disabled); border-color: var(--cb-button-main-bg-disabled); color: var(--cb-button-main-fg-disabled); cursor: not-allowed; }

/* Main invertido (ámbar) */
.cb-btn--main-inv { background: var(--cb-button-main-inv-bg); color: var(--cb-button-main-inv-fg); border-color: var(--cb-button-main-inv-bg); }

/* Secondary (contorno → relleno en hover) */
.cb-btn--secondary { background: var(--cb-button-secondary-bg); color: var(--cb-button-secondary-fg); border-color: var(--cb-button-secondary-border); }
.cb-btn--secondary:hover { background: var(--cb-button-secondary-bg-hover); color: var(--cb-button-secondary-fg-hover); border-color: var(--cb-button-secondary-bg-hover); }
.cb-btn--secondary:active { background: var(--cb-button-secondary-bg-active); color: var(--cb-button-secondary-fg-hover); border-color: var(--cb-button-secondary-bg-active); }
.cb-btn--secondary:disabled { background: var(--cb-button-secondary-bg-disabled); color: var(--cb-button-secondary-fg-disabled); border-color: var(--cb-button-secondary-bg-disabled); cursor: not-allowed; }

/* Secondary invertido (contorno ámbar) */
.cb-btn--secondary-inv { background: transparent; color: var(--cb-button-secondary-inv-fg); border-color: var(--cb-button-secondary-inv-border); }

/* Textlink */
.cb-btn--textlink { background: none; border: none; min-width: 0; padding: 0; height: auto; color: var(--cb-button-textlink-fg); }
.cb-btn--textlink:hover { color: var(--cb-brand-primary-hover); }

/* ==========================================================================
   INPUT / SELECT  ·  .cb-field
   El icono leading hereda el color del texto (currentColor);
   el calendario usa verde marca (.cb-field__icon--cal).
   ========================================================================== */
.cb-field { display: flex; flex-direction: column; gap: var(--cb-spacing-1); width: 273px; }

.cb-field__label {
  font-size: var(--cb-input-label-size); line-height: var(--cb-input-label-leading);
  letter-spacing: 0.035px; color: var(--cb-input-label);
}
.cb-field__req { color: var(--cb-input-label-required); margin-left: 4px; }

.cb-field__control {
  display: flex; align-items: center; gap: var(--cb-input-gap);
  height: var(--cb-input-height); padding: var(--cb-input-padding-y) var(--cb-input-padding-x);
  background: var(--cb-input-background);
  border: 1px solid var(--cb-input-border-default); border-radius: var(--cb-input-radius);
  color: var(--cb-input-placeholder);  /* color base de texto + icono leading */
  transition: border-color .15s ease, color .15s ease;
}
.cb-field__control input,
.cb-field__control select {
  flex: 1 1 0; min-width: 0; border: none; outline: none; background: transparent;
  font-family: var(--cb-font-family); font-size: var(--cb-input-text-size);
  line-height: var(--cb-input-text-leading); letter-spacing: var(--cb-input-text-spacing);
  color: inherit;
}
.cb-field__control select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.cb-field__control input::placeholder { color: var(--cb-input-placeholder); opacity: 1; }

.cb-field__icon { width: 24px; height: 24px; flex: none; }
.cb-field__icon--lead { color: inherit; }                       /* sigue el texto */
.cb-field__icon--cal  { color: var(--cb-input-icon-trailing); } /* calendario verde */
.cb-field__icon--chev { color: inherit; }                       /* chevron del select (gris) */

.cb-field__helper { font-size: var(--cb-input-helper-size); line-height: var(--cb-input-helper-leading); letter-spacing: 0.035px; color: var(--cb-input-helper); }
.cb-field__error  { font-size: var(--cb-input-helper-size); line-height: var(--cb-input-helper-leading); letter-spacing: 0.035px; color: var(--cb-input-error-text); }

/* Comportamiento interactivo (solo el campo real, sin modificador de estado) */
.cb-field:not([class*="--"]) .cb-field__control:hover { border-color: var(--cb-input-border-hover); }
.cb-field:not([class*="--"]) .cb-field__control:focus-within { border-color: var(--cb-input-border-focus); color: var(--cb-input-text); }
.cb-field:not([class*="--"]) .cb-field__control:has(input:not(:placeholder-shown)) { border-color: var(--cb-input-border-focus); color: var(--cb-input-text); }
/* select con valor elegido por el usuario → estado "selected" (requiere `required` en el <select>) */
.cb-field:not([class*="--"]) .cb-field__control:has(select:valid) { border-color: var(--cb-input-border-focus); color: var(--cb-input-text); }

/* Modificadores de estado (forzados / semánticos) */
.cb-field--hover    .cb-field__control { border-color: var(--cb-input-border-hover); }
.cb-field--filled   .cb-field__control { border-color: var(--cb-input-border-focus);   color: var(--cb-input-text); }
.cb-field--error    .cb-field__control { border-color: var(--cb-input-border-error);   color: var(--cb-input-text-error); }
.cb-field--success  .cb-field__control { border-color: var(--cb-input-border-success); color: var(--cb-input-text); }
.cb-field--disabled .cb-field__control { background: var(--cb-input-background-disabled); border-color: var(--cb-input-border-disabled); color: var(--cb-input-text-disabled); }
.cb-field--disabled .cb-field__icon--cal { color: var(--cb-input-text-disabled); }
.cb-field--readonly .cb-field__control { background: var(--cb-input-background-readonly); color: var(--cb-input-text); }

/* ==========================================================================
   BUDGET CARD · slider de rango  ·  .cb-budget / .cb-slider
   ========================================================================== */
.cb-budget { display: flex; flex-direction: column; gap: 3px; align-items: center; width: 100%; }
.cb-budget__header { display: flex; align-items: center; gap: 6px; }
.cb-budget__icon { width: 24px; height: 24px; flex: none; }
.cb-budget__label {
  font-size: var(--cb-text-paragraph-size); line-height: var(--cb-text-paragraph-leading);
  letter-spacing: var(--cb-text-paragraph-spacing); color: var(--cb-budget-label);
}

/* slider dual (dos range superpuestos: solo los thumbs reciben eventos) */
.cb-slider { position: relative; width: 184px; height: var(--cb-slider-thumb-size); display: flex; align-items: center; margin: 8px 0; }
.cb-slider__track { position: absolute; left: 0; right: 0; height: var(--cb-slider-track-height); background: var(--cb-slider-track); border-radius: 30px; }
.cb-slider__range { position: absolute; height: var(--cb-slider-range-height); background: var(--cb-slider-range); border-radius: 30px; }
.cb-slider__input {
  position: absolute; left: 0; width: 100%; margin: 0; height: var(--cb-slider-thumb-size);
  background: none; pointer-events: none; -webkit-appearance: none; appearance: none;
}
.cb-slider__input::-webkit-slider-runnable-track { background: none; border: none; }
.cb-slider__input::-moz-range-track { background: none; border: none; }
.cb-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto; cursor: pointer;
  width: var(--cb-slider-thumb-size); height: var(--cb-slider-thumb-size); border-radius: 50%;
  background: var(--cb-slider-thumb-bg); border: 2px solid var(--cb-slider-thumb-border);
}
.cb-slider__input::-moz-range-thumb {
  pointer-events: auto; cursor: pointer; box-sizing: border-box;
  width: var(--cb-slider-thumb-size); height: var(--cb-slider-thumb-size); border-radius: 50%;
  background: var(--cb-slider-thumb-bg); border: 2px solid var(--cb-slider-thumb-border);
}

.cb-budget__prices { display: flex; gap: var(--cb-spacing-5); align-items: flex-start; width: 100%; }
.cb-budget__price { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; align-items: center; }
.cb-budget__price-title { font-size: var(--cb-font-size-cta); line-height: 18px; letter-spacing: 0.035px; color: var(--cb-budget-price-title); text-align: center; }
.cb-budget__price-box { background: var(--cb-budget-price-bg); border-radius: var(--cb-budget-price-radius); padding: var(--cb-budget-price-padding-y) var(--cb-budget-price-padding-x); }
.cb-budget__price-value {
  font-weight: var(--cb-text-bold-small-weight); font-size: var(--cb-text-bold-small-size);
  line-height: var(--cb-text-bold-small-leading); letter-spacing: var(--cb-text-bold-small-spacing);
  color: var(--cb-budget-price-value); white-space: nowrap;
}

/* ==========================================================================
   TAG DE PROYECTO  ·  .cb-tag
   ========================================================================== */
.cb-tag {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--cb-tag-padding-y) var(--cb-tag-padding-x);
  border-radius: var(--cb-tag-radius); border: 1px solid transparent;
  font-family: var(--cb-font-family); font-weight: var(--cb-font-weight-regular);
  font-size: var(--cb-tag-font-size); line-height: var(--cb-tag-font-leading);
  letter-spacing: var(--cb-tag-font-spacing); white-space: nowrap;
}
.cb-tag--launch { background: var(--cb-tag-launch-bg); color: var(--cb-tag-launch-text); }
.cb-tag--last   { background: var(--cb-tag-last-bg);   color: var(--cb-tag-last-text); }
.cb-tag--sale   { background: var(--cb-tag-sale-bg);   color: var(--cb-tag-sale-text);
                  padding-left: var(--cb-tag-padding-x-sm); padding-right: var(--cb-tag-padding-x-sm); }
.cb-tag--sold   { background: var(--cb-tag-sold-bg);   color: var(--cb-tag-sold-text); }
.cb-tag--news   { background: transparent; color: var(--cb-tag-news-text); border-color: var(--cb-tag-news-border); }
.cb-tag--state  { background: transparent; color: var(--cb-brand-primary); border-color: var(--cb-brand-primary); }  /* estado proyecto: VIP / VIS (outline verde) */

/* ==========================================================================
   CARD DE PROYECTO  ·  .cb-card-proy
   ========================================================================== */
.cb-card-proy {
  position: relative;   /* ancla para el stretched-link de "Ver proyecto" */
  display: flex; flex-direction: column; width: var(--cb-card-proy-width); max-width: 100%;
  border-radius: var(--cb-card-proy-radius); overflow: hidden;
  background: var(--cb-card-proy-bg); box-shadow: var(--cb-card-proy-shadow);
}
/* Toda la card es clickeable → "Ver proyecto": el botón se estira con un ::after
   que cubre la card. "Contactar" se eleva por encima para conservar su acción. */
.cb-card-proy__stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.cb-card-proy__contact { position: relative; z-index: 2; }
.cb-card-proy__media { position: relative; padding-top: 13px; }   /* 13px arriba → el tag superior cruza el borde de la imagen */
.cb-card-proy__img { display: block; width: 100%; height: var(--cb-card-proy-img-height); object-fit: cover; border-radius: var(--cb-card-proy-radius) var(--cb-card-proy-radius) 0 0; }
.cb-card-proy__tag { position: absolute; top: 0; left: 20px; }   /* mitad fuera / mitad dentro de la imagen */

.cb-card-proy__content {
  display: flex; flex-direction: column; gap: 18px;
  padding: 18px 18px 24px;
  border: 1px solid var(--cb-card-proy-border); border-top: none;
  border-radius: 0 0 var(--cb-card-proy-radius) var(--cb-card-proy-radius);
}

.cb-card-proy__head { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }   /* título/ubicación + tag VIP/VIS */
.cb-card-proy__name { display: flex; flex-direction: column; gap: 6px; color: var(--cb-color-black); }
.cb-card-proy__title {
  margin: 0; font-family: var(--cb-text-h4-family); font-weight: var(--cb-text-h4-weight);
  font-size: var(--cb-text-h4-size); line-height: var(--cb-text-h4-leading); letter-spacing: var(--cb-text-h4-spacing);
}
.cb-card-proy__loc {
  margin: 0; font-size: var(--cb-font-size-cta); line-height: 18px; letter-spacing: 0.035px;
  font-weight: var(--cb-font-weight-regular);
}

.cb-card-proy__feats { display: flex; flex-wrap: wrap; gap: 19px; align-items: flex-end; }
.cb-card-proy__feat { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.cb-card-proy__feat-icon { width: 24px; height: 24px; display: block; }
.cb-card-proy__feat-label {
  font-size: var(--cb-font-size-xs); line-height: 14px; letter-spacing: 0;  /* Overline 10/14 */
  color: var(--cb-card-proy-prop);
}

.cb-card-proy__price-row { display: flex; align-items: center; gap: 6px; color: var(--cb-card-proy-price); }
.cb-card-proy__price {
  margin: 0; font-family: var(--cb-text-h4-family); font-weight: var(--cb-text-h4-weight);
  font-size: var(--cb-text-h4-size); line-height: var(--cb-text-h4-leading); letter-spacing: var(--cb-text-h4-spacing);
}
.cb-card-proy__price-note { font-size: var(--cb-font-size-2xs); line-height: 16px; letter-spacing: -0.5px; }
.cb-card-proy__desc {
  margin: 0; font-size: var(--cb-font-size-2xs); line-height: 16px; letter-spacing: -0.5px;
  color: var(--cb-card-proy-desc);
}

.cb-card-proy__ctas { display: flex; gap: 12px; }
.cb-card-proy__ctas .cb-btn { flex: 1 1 0; min-width: 0; }

/* ==========================================================================
   CARD DE BLOG  ·  .cb-card-blog
   ========================================================================== */
.cb-card-blog {
  display: flex; flex-direction: column; width: var(--cb-card-proy-width); max-width: 100%;
  border-radius: var(--cb-card-proy-radius); overflow: hidden;
  background: var(--cb-color-white); box-shadow: var(--cb-card-proy-shadow);
}
.cb-card-blog__img { display: block; width: 100%; height: var(--cb-card-proy-img-height); object-fit: cover; }
.cb-card-blog__content { display: flex; flex-direction: column; gap: 36px; padding: 18px 24px; }
.cb-card-blog__info { display: flex; flex-direction: column; gap: 12px; }
.cb-card-blog__meta { display: flex; align-items: center; gap: 12px; }
.cb-card-blog__date { font-size: var(--cb-font-size-2xs); line-height: 1.2; color: var(--cb-color-gray-600); }
.cb-card-blog__txt { display: flex; flex-direction: column; gap: 12px; }
.cb-card-blog__title {
  margin: 0; font-family: var(--cb-text-h4-family); font-weight: var(--cb-text-h4-weight);
  font-size: var(--cb-text-h4-size); line-height: var(--cb-text-h4-leading); letter-spacing: var(--cb-text-h4-spacing);
  color: var(--cb-color-black);
}
.cb-card-blog__excerpt {
  margin: 0; font-size: var(--cb-font-size-cta); line-height: 18px; letter-spacing: 0.035px;
  color: var(--cb-color-gray-600);
}
.cb-card-blog__cta { gap: 3px; }

/* ==========================================================================
   BOTÓN FLOTANTE WHATSAPP  ·  .cb-wa
   Default: círculo (chevron) a la izq + "Hablemos ahora".
   Hover: el círculo se desliza a la derecha (ícono WhatsApp) y aparece
   "Ir a WhatsApp" sobre fondo blanco. Estados 1↔2 del componente.
   ========================================================================== */
/* contenedor fijo + resplandor de pulso (atención) detrás del botón + micro-rebote */
.cb-wa-fab { position: fixed; right: 24px; bottom: 24px; z-index: 200; }
.cb-wa-fab::before {
  content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 56px;
  border-radius: 50%; background: var(--cb-brand-primary); pointer-events: none;
  filter: blur(8px);                               /* desenfoque → resplandor */
  animation: cb-wa-pulse 2.2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
/* Pulso adaptativo: verde marca sobre fondos claros (default), ámbar sobre
   fondos oscuros o imágenes. La clase la activa el JS de scroll según la
   sección detrás del botón ([data-wa-dark]). */
.cb-wa-fab--dark::before { background: var(--cb-color-amber-50); }
.cb-wa-fab:hover::before { animation: none; opacity: 0; }
@keyframes cb-wa-pulse { 0% { transform: scale(1); opacity: .6; } 70%, 100% { transform: scale(1.85); opacity: 0; } }

.cb-wa {
  position: relative; display: block;
  width: 227px; height: 56px; border-radius: var(--cb-radius-full);
  background: var(--cb-brand-primary); overflow: hidden;
  box-shadow: var(--cb-shadow-float);
  text-decoration: none; cursor: pointer;
  transition: background .55s cubic-bezier(0.16, 1, 0.3, 1);
}
.cb-wa__label {
  position: absolute; top: 0; height: 100%; display: flex; align-items: center;
  font-family: var(--cb-font-family); font-size: var(--cb-font-size-base);
  line-height: 20px; letter-spacing: -0.08px; white-space: nowrap;
  transition: opacity .45s cubic-bezier(0.16, 1, 0.3, 1);
}
.cb-wa__label--idle { left: 64px; color: var(--cb-color-white); font-weight: var(--cb-font-weight-bold); }
.cb-wa__label--go   { left: 0; right: 56px; justify-content: center; color: var(--cb-brand-primary); font-weight: var(--cb-font-weight-semibold); opacity: 0; }
.cb-wa__circle {
  position: absolute; top: 0; left: 0; width: 56px; height: 56px; border-radius: 50%;
  background: var(--cb-color-amber-50); border: 3px solid var(--cb-brand-primary);
  display: flex; align-items: center; justify-content: center;
  transition: transform .55s cubic-bezier(0.16, 1, 0.3, 1), background .55s cubic-bezier(0.16, 1, 0.3, 1), border-color .55s cubic-bezier(0.16, 1, 0.3, 1);
}
.cb-wa__ic { position: absolute; width: 24px; height: 24px; transition: opacity .45s cubic-bezier(0.16, 1, 0.3, 1); }
.cb-wa__ic--chev { color: var(--cb-brand-primary); }
.cb-wa__ic--wa   { color: var(--cb-color-amber-50); opacity: 0; }

.cb-wa:hover { background: var(--cb-color-amber-50); }
.cb-wa:hover .cb-wa__circle { transform: translateX(171px); background: var(--cb-brand-primary); border-color: var(--cb-color-amber-50); }
.cb-wa:hover .cb-wa__label--idle { opacity: 0; }
.cb-wa:hover .cb-wa__label--go { opacity: 1; }
.cb-wa:hover .cb-wa__ic--chev { opacity: 0; }
.cb-wa:hover .cb-wa__ic--wa { opacity: 1; }


.alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}
.alert-success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}
.alert-primary {
  color: #004085;
  background-color: #cce5ff;
  border-color: #b8daff;
}
.alert {
  position: relative;
  padding: .75rem 1.25rem;
  margin-bottom: 0.5rem;
  border: 1px solid transparent;
  border-radius: .25rem;
}
button:disabled{
  opacity: 0.7 !important;
  pointer-events: none !important;
}