/* front.css - Black Pearl Salon */
.bpb,.bpb *{box-sizing:border-box}.bpb{--bpb-ink:#252122;--bpb-border:#dfd8d5;--bpb-warm:#f8f5f2;--bpb-purple:#8a738b;color:var(--bpb-ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;max-width:1080px;margin:2rem auto;padding:clamp(1.25rem,5vw,4rem);background:#fbf9f7;border:1px solid #e8e0dd;border-radius:3px;box-shadow:0 22px 75px rgba(46,29,31,.04)}
.bpb-intro{margin-bottom:2.5rem;max-width:720px}.bpb-overline{font-size:11px;letter-spacing:.26em;font-weight:600;color:#987f93}.bpb-intro h2{font-family:Georgia,"Times New Roman",serif;font-size:clamp(2rem,5vw,3.55rem);font-weight:400;line-height:1.13;letter-spacing:-.045em;margin:14px 0 16px}.bpb-intro h2 em{font-weight:400;color:#91758e}.bpb-intro p{margin:0;color:#6c6360;font-size:15px;line-height:1.6}
.bpb-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.bpb label{display:flex;flex-direction:column;gap:9px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:650}.bpb input:not([type=checkbox]),.bpb select,.bpb textarea{display:block;width:100%;min-width:0;font-size:15px;line-height:1.4;font-family:inherit;text-transform:none;letter-spacing:normal;color:#292223;background:#fff;border:1px solid #d5cdcb;border-radius:2px;padding:13px 12px;box-shadow:none;min-height:47px}.bpb input:focus,.bpb select:focus,.bpb textarea:focus{outline:2px solid #b6a5b4;outline-offset:1px}.bpb select:disabled{opacity:.55}.bpb-subheading{font-weight:650;text-transform:uppercase;font-size:12px;letter-spacing:.06em;margin-bottom:16px}.bpb-times-wrap{margin-top:33px;padding-top:25px;border-top:1px solid var(--bpb-border)}.bpb-times{min-height:45px;display:flex;flex-wrap:wrap;align-items:center;gap:9px;color:#77706b;font-size:14px}.bpb-time{border:1px solid #cfc2c5;background:white;padding:11px 16px;min-width:80px;cursor:pointer;color:#2b2526;border-radius:2px;font-weight:500;font-family:inherit}.bpb-time:hover{border-color:#8d748a}.bpb-time.is-selected{color:white;background:#2d252c;border-color:#2d252c}.bpb-contact{padding-top:25px;border-top:1px solid var(--bpb-border);margin-top:23px}.bpb-contact[hidden]{display:none}.bpb-fields-contact{margin-bottom:16px}.bpb-notes{margin:16px 0}.bpb .bpb-privacy{display:flex;align-items:flex-start;flex-direction:row;text-transform:none;letter-spacing:0;font-weight:400;font-size:13px;line-height:1.5;margin:19px 0}.bpb-privacy input{width:16px;height:16px;flex-shrink:0}.bpb a{color:#7c5f79;text-decoration:underline}.bpb-submit{background:#292329;color:white;border:1px solid #292329;border-radius:0;padding:17px 24px;font-size:13px;text-transform:uppercase;letter-spacing:.16em;font-weight:600;cursor:pointer;min-height:52px}.bpb-submit:hover{background:#554453}.bpb-submit:disabled{opacity:.5}.bpb-submit span{padding-left:14px;font-size:18px}.bpb-result{margin-top:15px;font-size:14px;color:#7d3030}.bpb-result.is-success{color:#245a43}.bpb-footer{border-top:1px solid var(--bpb-border);padding-top:17px;margin-top:30px!important;color:#837875;font-size:12px!important;line-height:1.5}.bpb .bpb-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;opacity:0!important}
@media(max-width:750px){.bpb{margin:1rem auto;padding:25px 18px}.bpb-fields{grid-template-columns:1fr}.bpb-intro{margin-bottom:25px}.bpb-times-wrap{margin-top:24px}.bpb-submit{width:100%}}
.bpb-warning {padding:14px 17px;background:#f8f0ed;border:1px solid #efd6ce;color:#5c3027;border-radius:10px;font-size:14px}
.bpb-manual {margin-top:30px;padding:24px;background:#f8f5f3;border-radius:14px}
.bpb-manual h3 {margin-top:0}

/* V0.3 categories and dedicated staff portal */
.bpb-fields{grid-template-columns:repeat(4,minmax(0,1fr))}
.bpb-fields-contact{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:940px){.bpb-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.bpb-fields,.bpb-fields-contact{grid-template-columns:1fr}}
.bpb label[hidden]{display:none!important}
.bpb .bpb-fields select{min-height:58px;padding:15px 42px 15px 16px;font-size:16px;font-weight:600;border:1px solid #c8b8d0;box-shadow:0 3px 12px #4940520a;background-color:#fff;cursor:pointer}.bpb .bpb-fields select:focus{outline:3px solid #a88ab333;outline-offset:2px;border-color:#6e5579}.bpb .bpb-fields select:disabled{cursor:default;opacity:.55}
/* ========================================================
   REDISEÑO PREMIUM DEL CHECKOUT (Black Pearl Salon)
   ======================================================== */

#bpb-checkout {
  margin-top: 32px;
  padding: 32px 28px;
  border: 1px solid #e2d9df;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 16px 45px rgba(45, 30, 42, 0.06);
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

#bpb-checkout[hidden] {
  display: none !important;
}

/* 1. Corrección tipográfica total: anula la fuente cursiva/manuscrita */
#bpb-checkout,
#bpb-checkout *,
#bpb-card-payment,
#bpb-card-payment * {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  letter-spacing: normal !important;
}

/* 2. Banner de seguridad elegante y minimalista */
.bpb-payment-security {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  border: 1px solid #e8e0eb;
  border-left: 4px solid #8a5a8e;
  border-radius: 12px;
  background: #faf7fb;
  margin-bottom: 24px;
}

.bpb-payment-security strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #2b232c;
  margin-bottom: 4px;
}

.bpb-payment-security p {
  font-size: 13px;
  line-height: 1.5;
  color: #665b67;
  margin: 0;
}

/* 3. Contador de tiempo (Hold countdown) estilo badge flotante */
#bpb-hold-countdown {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: #fdf2f8;
  border: 1px solid #fbcfe8;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  color: #9d174d;
  margin: 0 0 20px 0;
}

#bpb-hold-countdown::before {
  content: "⏳";
  font-size: 14px;
}

/* 4. Título de sección "Pagar con tarjeta" */
#bpb-checkout > h3,
#bpb-checkout h3 {
  font-size: 18px;
  font-weight: 700;
  color: #1e1920;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 5. Mercado Pago Bricks: Tipografías, inputs y botón de pago */
#bpb-card-payment {
  min-height: 240px;
}

/* Encabezados internos de Bricks */
#bpb-card-payment h2,
#bpb-card-payment h3,
#bpb-card-payment h4,
#bpb-card-payment .svelte-title,
#bpb-card-payment [class*="title"],
#bpb-card-payment [class*="Title"] {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #2a222c !important;
  text-transform: none !important;
  margin-top: 14px !important;
  margin-bottom: 12px !important;
}

/* Labels e inputs dentro del checkout */
#bpb-card-payment label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #554857 !important;
  letter-spacing: .03em !important;
  margin-bottom: 6px !important;
}

#bpb-card-payment input {
  height: 48px !important;
  min-height: 48px !important;
  border: 1px solid #d3c9d4 !important;
  border-radius: 9px !important;
  padding: 11px 14px !important;
  font-size: 15px !important;
  color: #1f1a21 !important;
  background: #ffffff !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.02) !important;
  transition: all .18s ease !important;
}

#bpb-card-payment input:focus {
  border-color: #9333ea !important;
  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.15) !important;
  outline: none !important;
}

/* Botón de Pagar de Mercado Pago estilizado */
#bpb-card-payment button[type="submit"],
#bpb-card-payment button.mp-button,
#bpb-card-payment [class*="button-submit"] {
  background: linear-gradient(135deg, #2b232b, #151115) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  height: 52px !important;
  min-height: 52px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  cursor: pointer !important;
  box-shadow: 0 6px 18px rgba(35, 25, 35, 0.2) !important;
  transition: all .2s ease !important;
}

#bpb-card-payment button[type="submit"]:hover,
#bpb-card-payment button.mp-button:hover,
#bpb-card-payment [class*="button-submit"]:hover {
  background: linear-gradient(135deg, #443245, #2b232b) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 24px rgba(35, 25, 35, 0.28) !important;
}

/* 6. Opción secundaria (Pago con App / Saldo Mercado Pago) */
.bpb-wallet-secondary {
  border-top: 1px solid #ebe4ed;
  margin-top: 32px;
  padding-top: 24px;
  text-align: center;
}

.bpb-wallet-secondary > p {
  font-size: 13px;
  font-weight: 500;
  color: #6a5e6d;
  margin-bottom: 14px;
}

#bpb-wallet-payment {
  width: 100%;
  min-height: 54px;
  background: #faf8fb;
  color: #2b212e;
  border: 1px solid #dcd1e0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 20px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 550;
  transition: all .2s ease;
}

#bpb-wallet-payment:hover {
  border-color: #8b5cf6;
  background: #fdf4ff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.12);
}

#bpb-wallet-payment img {
  height: 24px;
  width: auto;
  object-fit: contain;
}

/* Adaptación móvil */
@media(max-width: 600px) {
  #bpb-checkout {
    padding: 22px 16px;
    border-radius: 14px;
  }
}
/* ========================================================
   TRANSFORMACIÓN DE ENLACES A BOTONES (Explorar & WhatsApp)
   ======================================================== */

/* 1. Botón "Consultar por WhatsApp" (Estilo elegante Black Pearl con acento verde WhatsApp sutil) */
a[href*="wa.me"],
a[href*="whatsapp.com"],
a[href*="api.whatsapp.com"],
.btn-whatsapp {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: #1f3d2c !important; /* Verde bosque profundo elegante */
  color: #ffffff !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  text-decoration: none !important;
  padding: 10px 18px !important;
  margin-top: 14px !important;
  border-radius: 24px !important;
  border: 1px solid #2e5c42 !important;
  box-shadow: 0 4px 14px rgba(31, 61, 44, 0.16) !important;
  transition: all .2s ease !important;
  width: fit-content !important;
}

a[href*="wa.me"]::before,
a[href*="whatsapp.com"]::before,
a[href*="api.whatsapp.com"]::before {
  content: "💬";
  font-size: 13px;
}

a[href*="wa.me"]:hover,
a[href*="whatsapp.com"]:hover,
a[href*="api.whatsapp.com"]:hover,
.btn-whatsapp:hover {
  background: #2b553e !important;
  color: #ffffff !important;
  border-color: #407b5a !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(31, 61, 44, 0.25) !important;
  text-decoration: none !important;
}

/* 2. Botón "Explorar" en tarjetas de servicio */
/* Cubre enlaces dentro de las tarjetas de categorías que no sean de WhatsApp */
div:has(> h3):has(> p) a:not([href*="wa.me"]):not([href*="whatsapp"]),
article a:not([href*="wa.me"]):not([href*="whatsapp"]):not(.bpb-time),
[class*="card"] a:not([href*="wa.me"]):not([href*="whatsapp"]):not(.bpb-time),
.service-card a,
.category-card a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: #2b2326 !important; /* Grafito cálido refinado */
  color: #ffffff !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 9px 18px !important;
  margin-top: 14px !important;
  border-radius: 20px !important;
  border: 1px solid #45383d !important;
  box-shadow: 0 3px 10px rgba(43, 35, 38, 0.12) !important;
  transition: all .2s ease !important;
  width: fit-content !important;
}

div:has(> h3):has(> p) a:not([href*="wa.me"]):not([href*="whatsapp"]):hover,
article a:not([href*="wa.me"]):not([href*="whatsapp"]):hover,
[class*="card"] a:not([href*="wa.me"]):not([href*="whatsapp"]):hover,
.service-card a:hover,
.category-card a:hover {
  background: #47393f !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(43, 35, 38, 0.22) !important;
  text-decoration: none !important;
}

/* Añadir flechita sutil a "Explorar" */
div:has(> h3):has(> p) a:not([href*="wa.me"]):not([href*="whatsapp"])::after,
[class*="card"] a:not([href*="wa.me"]):not([href*="whatsapp"])::after {
  content: " →";
  font-size: 13px;
  transition: transform .15s ease;
}

div:has(> h3):has(> p) a:not([href*="wa.me"]):not([href*="whatsapp"]):hover::after,
[class*="card"] a:not([href*="wa.me"]):not([href*="whatsapp"]):hover::after {
  transform: translateX(3px);
}