/* ============================================================
   Estilos exclusivos de carrito.html (la landing es de una sola
   página; esta es la única página aparte)
   ============================================================ */
body.page-cart{padding-top:var(--header-h)}
body.page-cart .header__bar{
  background:var(--c-barra);backdrop-filter:blur(16px);
  border-color:var(--c-border);box-shadow:var(--shadow-lg);
}

/* Cabecera de la página */
.pagehead{
  background:var(--c-bg-alt);border-bottom:1px solid var(--c-border);
  padding:clamp(3rem,6vw,4.5rem) 0;
}
.pagehead h1{font-size:clamp(2.2rem,4.6vw,3.4rem);font-weight:600;margin-bottom:.8rem}
.pagehead p{color:var(--c-text-soft);max-width:58ch;font-weight:400}
.crumbs{
  font-size:.68rem;letter-spacing:var(--track);text-transform:uppercase;
  color:var(--c-text-soft);margin-bottom:1.4rem;display:flex;gap:.6rem;flex-wrap:wrap;
}
.crumbs a:hover{color:var(--c-accent)}

/* Formulario del paso de pago */
.field{display:grid;gap:.5rem;margin-bottom:1.8rem}
.field label{font-size:.66rem;letter-spacing:var(--track);text-transform:uppercase;color:var(--c-text-soft)}
.field input,.field textarea{
  padding:.8rem 0;border:0;border-bottom:1px solid var(--c-border);border-radius:0;
  background:transparent;color:var(--c-text);font:inherit;font-size:.98rem;font-weight:400;
  transition:border-color .3s;
}
.field input::placeholder,.field textarea::placeholder{color:var(--c-text-soft);opacity:.55}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--c-accent)}
.field textarea{min-height:120px;resize:vertical}

.pay-note{
  margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--c-border);
  font-size:.78rem;color:var(--c-text-soft);text-align:center;font-weight:400;
}