/* =========================================================
   COMPONENTS.CSS
   Piezas reutilizables de interfaz. Si agregas una seccion
   nueva y necesitas un boton, una tarjeta, etc., usa las
   clases de aca en vez de crear estilos nuevos.
   ========================================================= */

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 22px;
  font-size:15px;
  font-weight:500;
  border-radius:var(--radius);
  border:1px solid var(--color-gold);
  transition:border-color var(--ease), background var(--ease), transform 120ms ease;
  white-space:nowrap;
}
.btn svg{ width:16px; height:16px; flex-shrink:0; }
.btn-solid{ background:var(--color-gold); color:var(--color-black); }
.btn-outline{ color:var(--color-ivory); border-color:var(--color-line); }
.btn-outline:hover, .btn-solid:hover{ border-color:var(--color-gold-bright); transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .btn{ transition:border-color var(--ease), background var(--ease); }
  .btn-outline:hover, .btn-solid:hover{ transform:none; }
}

.btn-compact{ padding:9px 14px; font-size:14px; }

.sticky-cta-bar{
  position:fixed;
  top:0; left:0; right:0;
  height:var(--sticky-h);
  z-index:100;
  background:rgba(18,17,16,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--color-line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2);
  padding:0 16px;
}
.sticky-cta-bar__brand{
  height:32px;
  width:auto;
  flex-shrink:0;
}
.sticky-cta-bar__actions{
  display:flex;
  gap:8px;
}
@media (max-width:320px){
  .sticky-cta-bar__actions .btn-label{ display:none; }
  .btn-compact{ padding:9px 12px; }
}

.whatsapp-float{
  position:fixed;
  right:20px;
  bottom:20px;
  width:56px;
  height:56px;
  border-radius:50%;
  background:#25D366;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,0.35);
  z-index:150;
  transition:transform 150ms ease;
}
.whatsapp-float svg{ width:28px; height:28px; color:#fff; }
.whatsapp-float:hover{ transform:scale(1.06); }
@media (prefers-reduced-motion: reduce){
  .whatsapp-float:hover{ transform:none; }
}
@media (max-width:380px){
  .whatsapp-float{ width:50px; height:50px; right:14px; bottom:14px; }
  .whatsapp-float svg{ width:24px; height:24px; }
}

.rating{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  color:var(--color-ivory-dim);
}
.rating strong{
  color:var(--color-gold-bright);
  font-family:var(--font-display);
  font-size:20px;
}
.rating .icon{ width:18px; height:18px; color:var(--color-gold-bright); flex-shrink:0; }

.row-list{ display:flex; flex-direction:column; }
.row-item{
  padding:16px 0;
  border-top:1px solid var(--color-line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.row-item:first-child{ border-top:none; padding-top:0; }
.row-title{
  font-family:var(--font-display);
  font-size:18px;
  color:var(--color-gold-bright);
}
.row-note{
  font-size:14px;
  color:var(--color-ivory-dim);
  margin-top:3px;
}
.row-link{
  font-size:14px;
  font-weight:500;
  color:var(--color-gold-bright);
  flex-shrink:0;
  transition:color var(--ease);
}
.row-link:hover{ color:var(--color-ivory); }

.review-carousel{ overflow:hidden; }
.review-track{
  display:flex;
  transition:transform 500ms ease;
}
.review-slide{
  min-width:100%;
  padding-right:4px;
}
.quote{
  font-family:var(--font-display);
  font-size:19px;
  color:var(--color-ivory);
  font-style:italic;
}
.quote-src{
  margin-top:10px;
  font-size:13px;
  color:var(--color-ivory-dim);
}
.review-dots{
  display:flex;
  gap:8px;
  margin-top:20px;
}
.review-dot{
  position:relative;
  width:7px; height:7px;
  border-radius:50%;
  background:var(--color-line);
  cursor:pointer;
}
.review-dot::after{
  content:'';
  position:absolute;
  inset:-16px;
}
.review-dot.active{ background:var(--color-gold-bright); }

.contact-grid{ display:flex; flex-direction:column; }
.contact-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 0;
  border-top:1px solid var(--color-line);
  transition:opacity var(--ease);
}
.contact-item:hover{ opacity:0.8; }
.contact-item:first-child{ border-top:none; padding-top:0; }
.contact-item > span:not(.label){ color:var(--color-ivory-dim); font-size:14px; }
.contact-item .label{ display:flex; align-items:center; gap:10px; }
.contact-item .icon{ width:20px; height:20px; }
.contact-item strong{
  font-family:var(--font-display);
  font-weight:500;
  font-size:16px;
  color:var(--color-gold-bright);
  white-space:nowrap;
}