/* ==========================================================================
   HOJA IMPORTADA DE CLAUDE DESIGN — GENERADA, NO SE EDITA A MANO

   Cada regla de aqui lleva un selector REAL del carrito y, dentro, las
   declaraciones que pinta el artboard. Ni un valor esta escrito a ojo.

   COMO SE REHACE
   --------------
     1. python3 -m http.server 8899   en la carpeta del diseno
     2. abrir el .dc.html en el navegador (lo pinta su propio support.js)
     3. volcar el estilo CALCULADO de cada seccion a un .json
     4. python3 docs/rediseno-carrito/aplicar.py ...

   El paso 3 usa el estilo calculado y no el atributo style porque el motor de
   Claude Design guarda parte de las declaraciones en una hoja propia: volcando
   el outerHTML se pierde la mitad.

   DONDE VAN LOS AJUSTES
   ---------------------
   Aqui NO. Este archivo se reescribe entero en cada importacion. Lo que haya
   que corregir -porque en la pagina hay datos reales y en el artboard no- va
   en carrito.css, que se carga despues y gana.
   ========================================================================== */

/* ---------- paso-pedido ---------- */

.car-paso {
    box-sizing: border-box;
    color: rgb(76, 76, 76);
    display: flex;
    flex-direction: column;
    font-family: Jost, system-ui, sans-serif;
    font-size: 16px;
    font-weight: 400;
    gap: 18px;
}

.car-paso-cab {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    font-size: 16px;
    gap: 14px;
    height: 28px;
}

.car-paso-num {
    align-items: center;
    background-color: rgb(140, 98, 57);
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    display: flex;
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 600;
    height: 28px;
    justify-content: center;
}

.car-paso-tit {
    box-sizing: border-box;
    color: rgb(140, 98, 57);
    display: block;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2.52px;
    text-transform: uppercase;
}

.car-paso-filete {
    background-color: rgb(230, 221, 210);
    box-sizing: border-box;
    display: block;
    flex: 1 1 0%;
    font-size: 16px;
    height: 1px;
}

.car-linea {
    border: 1px solid rgb(230, 221, 210);
    box-sizing: border-box;
    display: block;
    font-size: 16px;
}

.car-linea-foto {
    background-image: url("http://127.0.0.1:8899/assets/pack-happy.jpg");
    box-sizing: border-box;
    display: block;
    font-size: 16px;
    height: 88px;
}

.car-linea-nom {
    box-sizing: border-box;
    display: block;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.34px;
    line-height: 20.4px;
}

.car-linea-cod {
    box-sizing: border-box;
    color: rgb(168, 149, 127);
    display: block;
    font-size: 12px;
    letter-spacing: 1.2px;
}

.car-cant {
    align-items: center;
    border: 1px solid rgb(230, 221, 210);
    box-sizing: border-box;
    display: flex;
    font-size: 16px;
    height: 40px;
}

.car-cant-boton {
    background-color: rgb(250, 246, 241);
    box-sizing: border-box;
    color: rgb(140, 98, 57);
    cursor: pointer;
    display: block;
    flex: 0 0 auto;
    font-size: 18px;
    height: 38px;
    padding: 1px 6px;
    text-align: center;
}

.car-cant-campo {
    box-sizing: border-box;
    display: block;
    flex: 1 1 0%;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}

.car-linea-precio {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    font-size: 16px;
    gap: 3px;
    text-align: right;
}

.car-linea-antes {
    box-sizing: border-box;
    color: rgb(168, 149, 127);
    display: block;
    font-size: 13px;
    text-decoration-line: line-through;
}

.car-linea-ahora {
    box-sizing: border-box;
    color: rgb(255, 180, 102);
    display: block;
    font-size: 20px;
    font-weight: 600;
}

.car-linea-total-cifra {
    box-sizing: border-box;
    color: rgb(140, 98, 57);
    display: block;
    font-size: 20px;
    font-weight: 600;
    text-align: right;
}

.car-linea-quitar {
    align-items: center;
    border: 1px solid rgb(230, 221, 210);
    box-sizing: border-box;
    color: rgb(168, 149, 127);
    cursor: pointer;
    display: flex;
    font-size: 13.3333px;
    height: 34px;
    justify-content: center;
    padding: 1px 6px;
    text-align: center;
}

.car-comps {
    background-color: rgb(250, 246, 241);
    border-top: 1px solid rgb(230, 221, 210);
    box-sizing: border-box;
    display: block;
    font-size: 16px;
    padding: 18px 24px 20px;
}

.car-comps-tit {
    box-sizing: border-box;
    color: rgb(168, 149, 127);
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.98px;
    margin: 0px 0px 14px;
    text-transform: uppercase;
}

.car-linea-comp {
    align-items: center;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(230, 221, 210);
    box-sizing: border-box;
    display: grid;
    font-size: 16px;
    gap: 18px;
    padding: 12px 14px;
}

.car-linea-comp-nom {
    box-sizing: border-box;
    display: block;
    font-size: 14.5px;
    font-weight: 500;
}

.car-linea-comp-uni {
    box-sizing: border-box;
    color: rgb(168, 149, 127);
    display: block;
    font-size: 12px;
}

.car-cant--comp {
    align-items: center;
    border: 1px solid rgb(230, 221, 210);
    box-sizing: border-box;
    display: flex;
    font-size: 16px;
    height: 34px;
}

.car-cant--comp .car-cant-boton {
    background-color: rgb(250, 246, 241);
    box-sizing: border-box;
    color: rgb(140, 98, 57);
    cursor: pointer;
    display: block;
    flex: 0 0 auto;
    font-size: 16px;
    height: 32px;
    padding: 1px 6px;
    text-align: center;
}

.car-cant--comp .car-cant-campo {
    box-sizing: border-box;
    display: block;
    flex: 1 1 0%;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.car-linea-comp-total {
    box-sizing: border-box;
    color: rgb(140, 98, 57);
    display: block;
    font-size: 15px;
    font-weight: 600;
    text-align: right;
}

.car-linea-comp-quitar {
    align-items: center;
    border: 1px solid rgb(230, 221, 210);
    box-sizing: border-box;
    color: rgb(168, 149, 127);
    cursor: pointer;
    display: flex;
    font-size: 13.3333px;
    height: 30px;
    justify-content: center;
    padding: 1px 6px;
    text-align: center;
}

.car-linea-toggle {
    align-items: center;
    background-color: rgb(250, 246, 241);
    border-top: 1px solid rgb(230, 221, 210);
    box-sizing: border-box;
    color: rgb(140, 98, 57);
    cursor: pointer;
    display: flex;
    font-size: 12.5px;
    font-weight: 600;
    gap: 10px;
    letter-spacing: 1.75px;
    padding: 16px 24px;
    text-align: center;
    text-transform: uppercase;
}

.car-promo {
    align-items: flex-start;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    font-size: 16px;
    gap: 14px;
}

.car-promo > *:first-child {
    box-sizing: border-box;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    font-size: 16px;
    gap: 7px;
}

.car-rotulo {
    box-sizing: border-box;
    color: rgb(168, 149, 127);
    display: block;
    font-size: 11px;
    font-weight: 600;
    height: 16px;
    letter-spacing: 1.98px;
    text-transform: uppercase;
}

.car-promo-fila {
    box-sizing: border-box;
    display: flex;
    font-size: 16px;
}

.car-promo-fila .car-input {
    background-color: rgb(255, 255, 255);
    border-bottom: 1px solid rgb(230, 221, 210);
    border-left: 1px solid rgb(230, 221, 210);
    border-top: 1px solid rgb(230, 221, 210);
    box-sizing: border-box;
    cursor: text;
    display: block;
    font-size: 14.5px;
    height: 44px;
    overflow: clip;
    padding: 0px 14px;
}

.car-promo-fila .car-boton {
    background-color: rgb(140, 98, 57);
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    cursor: pointer;
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    height: 44px;
    letter-spacing: 2px;
    padding: 0px 26px;
    text-align: center;
}

.car-promo-pie .car-enlace {
    box-sizing: border-box;
    color: rgb(121, 104, 87);
    cursor: pointer;
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 1.25px;
    text-transform: uppercase;
}

/* ---------- paso-entrega ---------- */

.car-paso .car-panel {
    background-color: rgb(250, 246, 241);
    border: 1px solid rgb(230, 221, 210);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    font-size: 16px;
    gap: 22px;
    padding: 24px;
}

.car-entrega-fila {
    align-items: flex-start;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    font-size: 16px;
    gap: 20px;
}

.car-entrega-campo {
    box-sizing: border-box;
    display: flex;
    flex: 1 1 260px;
    flex-direction: column;
    font-size: 16px;
    gap: 8px;
}

.car-select {
    align-items: center;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(230, 221, 210);
    box-sizing: border-box;
    cursor: default;
    display: block;
    font-size: 14.5px;
    height: 46px;
    overflow: clip;
    padding: 0px 12px;
    white-space: pre;
}

.car-entrega-campo--costo {
    box-sizing: border-box;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    font-size: 16px;
    gap: 8px;
    padding: 2px 0px 0px;
}

.car-envio-costo {
    align-items: center;
    box-sizing: border-box;
    color: rgb(140, 98, 57);
    display: flex;
    font-size: 20px;
    font-weight: 600;
}

.car-filete {
    background-color: rgb(230, 221, 210);
    box-sizing: border-box;
    display: block;
    font-size: 16px;
    height: 1px;
}

.aviso-entrega {
    box-sizing: border-box;
    display: block;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
}

.car-fechahora {
    align-items: flex-start;
    box-sizing: border-box;
    display: flex;
    font-size: 16px;
    gap: 14px;
}

.car-picker {
    bottom: 0px;
    box-sizing: border-box;
    display: flex;
    flex: 1 1 0px;
    flex-direction: column;
    font-size: 16px;
    gap: 6px;
    left: 0px;
    position: relative;
    right: 0px;
    top: 0px;
}

.car-picker-campo {
    align-items: center;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(230, 221, 210);
    box-sizing: border-box;
    color: rgb(168, 149, 127);
    cursor: pointer;
    display: flex;
    font-size: 15px;
    height: 52px;
    padding: 0px 46px 0px 16px;
    text-align: left;
}

.car-picker-hora {
    bottom: 0px;
    box-sizing: border-box;
    display: flex;
    flex: 1 1 0px;
    flex-direction: column;
    font-size: 16px;
    gap: 6px;
    left: 0px;
    position: relative;
    right: 0px;
    top: 0px;
}

.car-hora-campo {
    align-items: center;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(230, 221, 210);
    box-sizing: border-box;
    color: rgb(168, 149, 127);
    cursor: pointer;
    display: flex;
    font-size: 15px;
    height: 52px;
    padding: 0px 46px 0px 16px;
    text-align: left;
}

.car-paso .car-panel > .car-rotulo {
    box-sizing: border-box;
    color: rgb(168, 149, 127);
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.98px;
    text-transform: uppercase;
}

.car-campos {
    box-sizing: border-box;
    display: grid;
    font-size: 16px;
    gap: 14px;
}

.car-campo {
    box-sizing: border-box;
    cursor: default;
    display: flex;
    flex-direction: column;
    font-size: 16px;
    gap: 6px;
    grid-column: span 1;
}

.car-input {
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(230, 221, 210);
    box-sizing: border-box;
    cursor: text;
    display: block;
    font-size: 14.5px;
    height: 46px;
    overflow: clip;
    padding: 0px 14px;
}

.car-campo--ancho {
    box-sizing: border-box;
    cursor: default;
    display: flex;
    flex-direction: column;
    font-size: 16px;
    gap: 6px;
    grid-column: span 2;
}

.car-campo .car-select {
    align-items: center;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(230, 221, 210);
    box-sizing: border-box;
    display: block;
    font-size: 14.5px;
    height: 46px;
    overflow: clip;
    padding: 0px 12px;
    white-space: pre;
}

/* ---------- paso-pago ---------- */

.car-pagos {
    box-sizing: border-box;
    display: grid;
    font-size: 16px;
    gap: 14px;
}

.car-pago.is-activa {
    align-items: flex-start;
    background-color: rgb(250, 246, 241);
    border: 1px solid rgb(140, 98, 57);
    box-sizing: border-box;
    color: rgb(0, 0, 0);
    cursor: pointer;
    display: flex;
    font-size: 13.3333px;
    gap: 14px;
    padding: 20px;
    text-align: left;
}

.car-pago.is-activa .car-opcion-dot {
    align-items: center;
    border: 1px solid rgb(140, 98, 57);
    border-radius: 50%;
    box-sizing: border-box;
    display: flex;
    flex: 0 0 auto;
    font-size: 13.3333px;
    justify-content: center;
    margin: 2px 0px 0px;
}

.car-pago.is-activa .car-opcion-dot::after {
    background-color: rgb(255, 180, 102);
    border-radius: 50%;
    box-sizing: border-box;
    display: block;
    font-size: 13.3333px;
}

.car-pago-txt {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    font-size: 13.3333px;
    gap: 5px;
}

.car-pago-tit {
    box-sizing: border-box;
    color: rgb(76, 76, 76);
    display: block;
    font-size: 14.5px;
    font-weight: 600;
}

.car-pago-desc {
    box-sizing: border-box;
    color: rgb(121, 104, 87);
    display: block;
    font-size: 12.5px;
    line-height: 18.75px;
}

.car-pago {
    align-items: flex-start;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(230, 221, 210);
    box-sizing: border-box;
    color: rgb(0, 0, 0);
    cursor: pointer;
    display: flex;
    font-size: 13.3333px;
    gap: 14px;
    padding: 20px;
    text-align: left;
}

.car-pago .car-opcion-dot {
    align-items: center;
    border: 1px solid rgb(230, 221, 210);
    border-radius: 50%;
    box-sizing: border-box;
    display: flex;
    flex: 0 0 auto;
    font-size: 13.3333px;
    justify-content: center;
    margin: 2px 0px 0px;
}

.car-pago .car-opcion-dot::after {
    border-radius: 50%;
    box-sizing: border-box;
    display: block;
    font-size: 13.3333px;
}

/* ---------- resumen ---------- */

.car-resumen {
    background-color: rgb(250, 246, 241);
    border-left: 1px solid rgb(230, 221, 210);
    box-sizing: border-box;
    color: rgb(76, 76, 76);
    display: flex;
    flex-direction: column;
    font-family: Jost, system-ui, sans-serif;
    font-size: 16px;
    font-weight: 400;
    gap: 20px;
    padding: 36px 32px 40px;
    position: sticky;
    top: 0px;
}

.car-resumen-tit {
    box-sizing: border-box;
    color: rgb(140, 98, 57);
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}

.car-resumen-filas {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    font-size: 16px;
    gap: 12px;
}

.car-resumen-fila {
    align-items: baseline;
    box-sizing: border-box;
    color: rgb(121, 104, 87);
    display: flex;
    font-size: 14.5px;
    gap: 12px;
}

.car-resumen-fila > span:first-child {
    box-sizing: border-box;
    display: block;
    font-size: 14.5px;
}

.car-resumen-fila > span:last-child {
    box-sizing: border-box;
    color: rgb(76, 76, 76);
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
}

.car-resumen .car-filete {
    background-color: rgb(230, 221, 210);
    box-sizing: border-box;
    display: block;
    font-size: 16px;
    height: 1px;
}

.car-resumen-total {
    align-items: flex-end;
    box-sizing: border-box;
    display: flex;
    font-size: 16px;
    gap: 12px;
    justify-content: space-between;
}

.car-resumen-total .car-rotulo {
    box-sizing: border-box;
    color: rgb(168, 149, 127);
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}

.car-resumen-total-cifra {
    box-sizing: border-box;
    color: rgb(140, 98, 57);
    display: block;
    font-size: 34px;
    font-weight: 600;
    line-height: 34px;
}

.car-resumen-entrega {
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(230, 221, 210);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    font-size: 16px;
    gap: 9px;
    padding: 14px 16px;
}

.car-resumen-entrega .car-rotulo {
    box-sizing: border-box;
    color: rgb(168, 149, 127);
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.76px;
    text-transform: uppercase;
}

.car-resumen-entrega-dato {
    box-sizing: border-box;
    display: block;
    font-size: 14px;
    line-height: 20.3px;
}

.car-resumen-entrega-dest {
    box-sizing: border-box;
    color: rgb(121, 104, 87);
    display: block;
    font-size: 13px;
    line-height: 18.85px;
}

.car-terminos {
    align-items: flex-start;
    box-sizing: border-box;
    color: rgb(121, 104, 87);
    cursor: pointer;
    display: flex;
    font-size: 12.5px;
    gap: 10px;
    line-height: 18.75px;
}

.car-terminos input {
    box-sizing: border-box;
    color: rgb(0, 0, 0);
    cursor: default;
    display: block;
    flex: 0 0 auto;
    font-size: 13.3333px;
    margin: 2px 0px 0px;
}

.car-boton-pagar {
    background-color: rgb(140, 98, 57);
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    cursor: pointer;
    display: block;
    font-size: 14px;
    font-weight: 600;
    height: 56px;
    letter-spacing: 3.36px;
    padding: 1px 6px;
    text-align: center;
}

.car-nota {
    box-sizing: border-box;
    color: rgb(168, 149, 127);
    display: block;
    font-size: 12px;
    line-height: 18px;
}

/* ---------- calendario ---------- */

.datepicker.datepicker-dropdown {
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(140, 98, 57);
    box-shadow: rgba(76, 76, 76, 0.12) 0px 10px 30px 0px;
    box-sizing: border-box;
    color: rgb(76, 76, 76);
    display: flex;
    flex-direction: column;
    font-family: Jost, system-ui, sans-serif;
    font-size: 16px;
    font-weight: 400;
    gap: 14px;
    padding: 18px;
    width: 322px;
    z-index: 20;
}

.datepicker.datepicker-dropdown thead tr:first-child {
    box-sizing: border-box;
    font-size: 16px;
}

.datepicker.datepicker-dropdown thead th.prev, .datepicker.datepicker-dropdown thead th.next {
    background-color: rgb(250, 246, 241);
    border: 1px solid rgb(230, 221, 210);
    box-sizing: border-box;
    color: rgb(140, 98, 57);
    cursor: pointer;
    font-size: 15px;
    line-height: 15px;
    padding: 1px 6px;
    text-align: center;
}

.datepicker.datepicker-dropdown thead th.datepicker-switch {
    box-sizing: border-box;
    color: rgb(140, 98, 57);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.12px;
    text-align: center;
    text-transform: uppercase;
}

.datepicker.datepicker-dropdown thead th.dow {
    box-sizing: border-box;
    color: rgb(168, 149, 127);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.63px;
    text-transform: uppercase;
}

.datepicker.datepicker-dropdown td.day.today {
    background-color: rgb(250, 246, 241);
    border: 1px solid rgb(255, 180, 102);
    box-sizing: border-box;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    padding: 1px 6px;
    text-align: center;
}

.datepicker.datepicker-dropdown td.day {
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(230, 221, 210);
    box-sizing: border-box;
    cursor: pointer;
    font-size: 14px;
    padding: 1px 6px;
    text-align: center;
}

.datepicker.datepicker-dropdown td.day.old, .datepicker.datepicker-dropdown td.day.new {
    border: 1px solid rgba(0, 0, 0, 0);
    box-sizing: border-box;
    color: rgb(168, 149, 127);
    cursor: default;
    font-size: 14px;
    padding: 1px 6px;
    text-align: center;
}

.datepicker.datepicker-dropdown td.day.disabled {
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(230, 221, 210);
    box-sizing: border-box;
    color: rgb(214, 204, 192);
    cursor: not-allowed;
    font-size: 14px;
    padding: 1px 6px;
    text-align: center;
}

.datepicker.datepicker-dropdown .car-cal-pie {
    border-top: 1px solid rgb(230, 221, 210);
    box-sizing: border-box;
    display: flex;
    font-size: 16px;
    gap: 8px;
    padding: 12px 0px 0px;
}

.datepicker.datepicker-dropdown .car-cal-atajo {
    background-color: rgb(250, 246, 241);
    border: 1px solid rgb(230, 221, 210);
    box-sizing: border-box;
    color: rgb(140, 98, 57);
    cursor: pointer;
    display: block;
    flex: 1 1 0%;
    font-size: 12px;
    font-weight: 600;
    height: 38px;
    letter-spacing: 1.2px;
    padding: 1px 6px;
    text-align: center;
    text-transform: uppercase;
}

.datepicker.datepicker-dropdown .car-cal-nota {
    box-sizing: border-box;
    color: rgb(168, 149, 127);
    display: block;
    font-size: 11.5px;
    line-height: 16.675px;
}

/* ---------- horas ---------- */

.car-hora-panel {
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(140, 98, 57);
    box-shadow: rgba(76, 76, 76, 0.12) 0px 10px 30px 0px;
    box-sizing: border-box;
    color: rgb(76, 76, 76);
    display: flex;
    flex-direction: column;
    font-family: Jost, system-ui, sans-serif;
    font-size: 16px;
    font-weight: 400;
    gap: 10px;
    left: 0px;
    padding: 18px;
    position: absolute;
    top: 58px;
    width: 322px;
    z-index: 20;
}

.car-hora-cab {
    box-sizing: border-box;
    color: rgb(168, 149, 127);
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.76px;
    text-transform: uppercase;
}

.car-hora-franja {
    align-items: center;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(230, 221, 210);
    box-sizing: border-box;
    color: rgb(0, 0, 0);
    cursor: pointer;
    display: flex;
    font-size: 13.3333px;
    gap: 12px;
    padding: 12px 14px;
    text-align: left;
}

.car-hora-franja-txt {
    box-sizing: border-box;
    color: rgb(76, 76, 76);
    display: block;
    font-size: 15px;
    font-weight: 600;
}

.car-hora-franja-tag {
    box-sizing: border-box;
    color: rgb(168, 149, 127);
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ---------- mov-pedido ---------- */

@media (max-width: 991.98px) {

    .car-paso-num {
        background-color: rgb(140, 98, 57);
        box-sizing: border-box;
        color: rgb(255, 255, 255);
        font-size: 12.5px;
        font-weight: 600;
        height: 24px;
    }

    .car-paso-tit {
        box-sizing: border-box;
        color: rgb(140, 98, 57);
        font-size: 12.5px;
        font-weight: 600;
        letter-spacing: 2px;
        text-transform: uppercase;
    }

    .car-linea {
        border: 1px solid rgb(230, 221, 210);
        box-sizing: border-box;
        font-size: 16px;
        gap: 14px;
        padding: 14px;
    }

    .car-linea-foto {
        background-image: url("blob:null/d2475189-d40b-40f4-832f-03a4d562f393");
        box-sizing: border-box;
        font-size: 16px;
        height: 64px;
    }

    .car-linea-nom {
        box-sizing: border-box;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 0.3px;
        line-height: 18px;
    }

    .car-linea-cod {
        box-sizing: border-box;
        color: rgb(168, 149, 127);
        font-size: 11.5px;
        letter-spacing: 0.92px;
    }

    .car-linea-precio {
        align-items: baseline;
        box-sizing: border-box;
        display: flex;
        font-size: 16px;
        gap: 8px;
    }

    .car-linea-antes {
        box-sizing: border-box;
        color: rgb(168, 149, 127);
        font-size: 12px;
        text-decoration-line: line-through;
    }

    .car-linea-ahora {
        box-sizing: border-box;
        color: rgb(255, 180, 102);
        font-size: 16px;
        font-weight: 600;
    }

    .car-linea-quitar {
        border: 1px solid rgb(230, 221, 210);
        box-sizing: border-box;
        color: rgb(168, 149, 127);
        cursor: pointer;
        font-size: 13.3333px;
        height: 34px;
        padding: 1px 6px;
        text-align: center;
    }

    .car-linea .car-cant {
        border: 1px solid rgb(230, 221, 210);
        box-sizing: border-box;
        font-size: 16px;
        height: 44px;
    }

    .car-linea .car-cant-boton {
        background-color: rgb(250, 246, 241);
        box-sizing: border-box;
        color: rgb(140, 98, 57);
        cursor: pointer;
        font-size: 18px;
        height: 42px;
        padding: 1px 6px;
        text-align: center;
    }

    .car-linea-total .car-rotulo {
        box-sizing: border-box;
        color: rgb(168, 149, 127);
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: 1.47px;
        text-transform: uppercase;
    }

    .car-linea-total-cifra {
        box-sizing: border-box;
        color: rgb(140, 98, 57);
        font-size: 19px;
        font-weight: 600;
    }

    .car-linea-toggle {
        background-color: rgb(250, 246, 241);
        border: 1px solid rgb(230, 221, 210);
        box-sizing: border-box;
        color: rgb(140, 98, 57);
        cursor: pointer;
        font-size: 12.5px;
        font-weight: 600;
        gap: 9px;
        height: 44px;
        letter-spacing: 1px;
        padding: 1px 6px;
        text-align: center;
    }

}

/* ---------- mov-entrega ---------- */

@media (max-width: 991.98px) {

    .car-paso-num {
        background-color: rgb(140, 98, 57);
        box-sizing: border-box;
        color: rgb(255, 255, 255);
        font-size: 12.5px;
        font-weight: 600;
        height: 24px;
    }

    .car-paso-tit {
        box-sizing: border-box;
        color: rgb(140, 98, 57);
        font-size: 12.5px;
        font-weight: 600;
        letter-spacing: 2px;
        text-transform: uppercase;
    }

    .car-paso .car-panel {
        background-color: rgb(250, 246, 241);
        border: 1px solid rgb(230, 221, 210);
        box-sizing: border-box;
        font-size: 16px;
        gap: 16px;
        padding: 14px;
    }

    .car-entrega-campo .car-rotulo {
        box-sizing: border-box;
        color: rgb(168, 149, 127);
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: 1.68px;
        text-transform: uppercase;
    }

    .car-select {
        background-color: rgb(255, 255, 255);
        border: 1px solid rgb(230, 221, 210);
        box-sizing: border-box;
        cursor: default;
        font-size: 14.5px;
        height: 46px;
        overflow: clip;
        padding: 0px 10px;
        white-space: pre;
    }

    .car-panel > .car-rotulo {
        box-sizing: border-box;
        color: rgb(168, 149, 127);
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: 1.68px;
        text-transform: uppercase;
    }

    .car-input {
        background-color: rgb(255, 255, 255);
        border: 1px solid rgb(230, 221, 210);
        box-sizing: border-box;
        cursor: text;
        font-size: 14.5px;
        height: 46px;
        overflow: clip;
        padding: 0px 12px;
    }

    .car-campo .car-select {
        background-color: rgb(255, 255, 255);
        border: 1px solid rgb(230, 221, 210);
        box-sizing: border-box;
        cursor: default;
        font-size: 14.5px;
        height: 46px;
        overflow: clip;
        padding: 0px 10px;
        white-space: pre;
    }

    .car-filete {
        background-color: rgb(230, 221, 210);
        box-sizing: border-box;
        font-size: 16px;
        height: 1px;
    }

    .car-mensaje-cab, .car-mensaje .car-rotulo {
        box-sizing: border-box;
        color: rgb(140, 98, 57);
        cursor: pointer;
        font-size: 10.5px;
        font-weight: 600;
        gap: 9px;
        letter-spacing: 1.68px;
        text-align: center;
        text-transform: uppercase;
    }

}

/* ---------- mov-datos ---------- */

@media (max-width: 991.98px) {

    .car-campos .car-input {
        background-color: rgb(255, 255, 255);
        border: 1px solid rgb(230, 221, 210);
        box-sizing: border-box;
        cursor: text;
        font-size: 14.5px;
        height: 46px;
        overflow: clip;
        padding: 0px 12px;
    }

    .car-opciones .car-opcion.is-activa {
        background-color: rgb(250, 246, 241);
        border: 1px solid rgb(140, 98, 57);
        box-sizing: border-box;
        color: rgb(140, 98, 57);
        cursor: pointer;
        font-size: 12px;
        font-weight: 600;
        height: 46px;
        letter-spacing: 1.44px;
        padding: 1px 6px;
        text-align: center;
    }

    .car-opciones .car-opcion {
        background-color: rgb(255, 255, 255);
        border: 1px solid rgb(230, 221, 210);
        box-sizing: border-box;
        color: rgb(121, 104, 87);
        cursor: pointer;
        font-size: 12px;
        font-weight: 600;
        height: 46px;
        letter-spacing: 1.44px;
        padding: 1px 6px;
        text-align: center;
    }

}

/* ---------- mov-pago ---------- */

@media (max-width: 991.98px) {

    .car-pago.is-activa {
        background-color: rgb(250, 246, 241);
        border: 1px solid rgb(140, 98, 57);
        box-sizing: border-box;
        color: rgb(0, 0, 0);
        cursor: pointer;
        font-size: 13.3333px;
        gap: 12px;
        padding: 16px;
        text-align: left;
    }

    .car-pago-tit {
        box-sizing: border-box;
        color: rgb(76, 76, 76);
        font-size: 14px;
        font-weight: 600;
    }

    .car-pago-desc {
        box-sizing: border-box;
        color: rgb(121, 104, 87);
        font-size: 12px;
        line-height: 18px;
    }

    .car-pago {
        background-color: rgb(255, 255, 255);
        border: 1px solid rgb(230, 221, 210);
        box-sizing: border-box;
        color: rgb(0, 0, 0);
        cursor: pointer;
        font-size: 13.3333px;
        gap: 12px;
        padding: 16px;
        text-align: left;
    }

}

/* ---------- mov-resumen ---------- */

@media (max-width: 991.98px) {

    .car-resumen {
        background-color: rgb(250, 246, 241);
        border: 1px solid rgb(230, 221, 210);
        box-sizing: border-box;
        color: rgb(76, 76, 76);
        font-family: Jost, system-ui, sans-serif;
        font-size: 16px;
        font-weight: 400;
        gap: 12px;
        padding: 16px;
    }

    .car-resumen-tit {
        box-sizing: border-box;
        color: rgb(140, 98, 57);
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: 1.89px;
        text-transform: uppercase;
    }

    .car-resumen-fila {
        box-sizing: border-box;
        color: rgb(121, 104, 87);
        font-size: 13.5px;
        gap: 10px;
    }

    .car-resumen-fila > span:first-child {
        box-sizing: border-box;
        font-size: 13.5px;
    }

    .car-resumen-fila > span:last-child {
        box-sizing: border-box;
        color: rgb(76, 76, 76);
        font-size: 13.5px;
        font-weight: 600;
        white-space: nowrap;
    }

    .car-resumen .car-filete {
        background-color: rgb(230, 221, 210);
        box-sizing: border-box;
        font-size: 16px;
        height: 1px;
    }

}


/* ----------------------------------------------------------------------
   DEL DISENO Y TODAVIA SIN SITIO EN LA PAGINA

   Aspectos del artboard que ningun selector del carrito reclama en
   mapa.json. Agrupados por aspecto y no por elemento: un componente
   que se repite -las celdas de un mes, las fichas de complemento-
   cuenta una vez, con el numero de veces que sale entre parentesis.

     calendario     0>1              <span>                                  box-sizing, display, font-size, gap, grid-template-columns, height
     calendario     0>1>0>0          <span> Do                               box-sizing, display, font-size, height (x7)
     calendario     0>1>10>0         <span> 2                                box-sizing, display, font-size (x30)
     calendario     0>1>7>0          <span>                                  box-sizing, display, font-size, height (x2)
     horas          0>2>1            <span>                                  box-sizing, color, display, font-size, font-weight, height, letter-spa
     mov-datos      0                <div>                                  box-sizing, color, display, flex-direction, font-family, font-size, fo
     mov-datos      0>6              <span>                                  box-sizing, display, font-size, gap, height
     mov-entrega    0                <div>                                  box-sizing, color, display, flex-direction, font-family, font-size, fo
     mov-entrega    0>1>1>1          <span>                                  align-items, box-sizing, display, font-size, gap, height
     mov-entrega    0>1>1>1>0        <span>                                  bottom, box-sizing, display, flex, flex-direction, font-size, gap, hei (x2)
     mov-entrega    0>1>1>1>0>0      <button>                                  align-items, background-color, border, box-sizing, color, cursor, disp (x2)
     mov-entrega    0>1>1>1>0>0>0    <span> Escoge la fecha                  box-sizing, display, font-size (x2)
     mov-entrega    0>1>3            <span>                                  box-sizing, display, flex-direction, font-size, gap, height
     mov-entrega    0>1>3>1          <label>                                  box-sizing, cursor, display, flex-direction, font-size, gap, height (x10)
     mov-pago       0                <div>                                  box-sizing, color, display, flex-direction, font-family, font-size, fo
     mov-pago       0>1>1            <span>                                  box-sizing, display, flex-direction, font-size, gap (x2)
     mov-pedido     0                <div>                                  box-sizing, color, display, flex-direction, font-family, font-size, fo
     mov-pedido     0>0              <span>                                  align-items, box-sizing, display, font-size, gap, height (x4)
     mov-pedido     0>1>0            <span>                                  align-items, box-sizing, display, font-size, gap, height
     mov-pedido     0>1>0>1          <span>                                  box-sizing, display, flex, flex-direction, font-size, gap, height
     mov-pedido     0>1>1            <span>                                  align-items, box-sizing, display, font-size, gap
     mov-pedido     0>1>1>0>1        <span>                                  box-sizing, display, font-size, font-weight, height, text-align
     mov-pedido     0>1>1>1          <span>                                  box-sizing, display, flex-direction, font-size, gap, text-align
     mov-pedido     0>1>1>1>1>0      <span> S/ 1,131.00                      box-sizing, font-size
     mov-pedido     0>1>3>0          <span>                                  background-color, border, box-sizing, display, flex-direction, font-si (x3)
     mov-pedido     0>1>3>0>0        <span>                                  align-items, box-sizing, display, font-size, gap (x3)
     mov-pedido     0>1>3>0>0>0      <span>                                  box-sizing, display, font-size, font-weight (x3)
     mov-pedido     0>1>3>0>0>1      <span>                                  box-sizing, color, display, font-size, white-space (x3)
     mov-pedido     0>1>3>0>1        <span>                                  align-items, box-sizing, display, font-size, gap, height (x3)
     mov-pedido     0>1>3>0>1>0      <span>                                  align-items, background-color, border, box-sizing, display, flex, font (x3)
     mov-pedido     0>1>3>0>1>0>0    <button> −                                background-color, box-sizing, color, cursor, display, font-size, heigh (x6)
     mov-pedido     0>1>3>0>1>0>1    <span>                                  box-sizing, display, font-size, font-weight, text-align (x4)
     mov-pedido     0>1>3>0>1>1      <span>                                  box-sizing, color, display, font-size, font-weight (x3)
     mov-pedido     0>2              <span>                                  box-sizing, display, flex-direction, font-size, gap, height (x2)
     mov-pedido     0>2>1            <span>                                  box-sizing, display, font-size, height
     mov-pedido     0>2>1>0          <input>                                  background-color, border-bottom, border-left, border-top, box-sizing, 
     mov-pedido     0>2>1>1          <button> VALIDAR                          background-color, box-sizing, color, cursor, display, flex, font-size,
     mov-resumen    0>1>0>0          <span> Productos (13)                   box-sizing, font-size (x6)
     mov-resumen    0>5              <span>                                  box-sizing, display, font-size, line-height
     mov-resumen    0>6              <span>                                  box-sizing, color, display, font-size, line-height
     paso-entrega   0>1>0>0>1>0      <option> Seleccionar distrito             align-items, box-sizing, display, font-size, gap, min-height, min-widt (x26)
     paso-entrega   0>1>0>1>1>0      <span> —                                box-sizing, display, font-size, height
     paso-entrega   0>1>2            <span>                                  box-sizing, display, flex-direction, font-size, gap
     paso-entrega   0>1>2>1>0>0>0    <span> Escoge una fecha de entrega      box-sizing, display, font-size (x2)
     paso-entrega   0>1>4            <span>                                  box-sizing, display, flex-direction, font-size, gap, height
     paso-entrega   0>1>6            <span>                                  box-sizing, display, flex-direction, font-size, gap, height
     paso-entrega   0>1>6>0          <button> Mensaje en la tarjeta            align-items, box-sizing, color, cursor, display, font-size, font-weigh
     paso-entrega   0>1>6>0>0        <span>                                  box-sizing, color, display, font-size, font-weight, height, letter-spa
     paso-entrega   0>1>6>0>0>0      <span> opcional                         box-sizing, font-size (x7)
     paso-pago      0>1>0>1>1>0      <span> Visa, Mastercard, Amex y Diners. Confirm box-sizing, font-size (x3)
     paso-pedido    0>1>0            <div>                                  align-items, box-sizing, display, font-size, gap, grid-template-column
     paso-pedido    0>1>0>1          <span>                                  box-sizing, display, flex-direction, font-size, gap
     paso-pedido    0>1>0>2>1>0      <span> 13                               box-sizing, font-size (x3)
     paso-pedido    0>1>0>4>0        <span> S/ 1,131.00                      box-sizing, font-size
     paso-pedido    0>1>1>1          <div>                                  box-sizing, display, flex-direction, font-size, gap (x3)
     paso-pedido    0>1>1>1>0>0      <span>                                  box-sizing, display, flex-direction, font-size, gap (x3)
     paso-pedido    0>1>1>1>0>0>0>0  <span> Globo metálico feliz cumpleaños  box-sizing, font-size (x33)
     paso-pedido    0>1>1>1>0>0>1>0  <span> S/ 12.00 c/u                     box-sizing, font-size (x12)
     paso-pedido    0>1>1>1>0>1>1>0  <span> 1                                box-sizing, font-size (x13)
     paso-pedido    0>1>1>1>0>2>0    <span> S/ 12.00                         box-sizing, font-size (x11)
     paso-pedido    0>1>2>0          <span>                                  box-sizing, display, font-size, height, line-height
     paso-pedido    0>1>2>1          <span> Complementos (1)                 box-sizing, display, font-size, height (x2)
     resumen        0>3>1>0          <span> S/ 1,143.00                      box-sizing, font-size
     resumen        0>4>2>0          <span> Falta quién recibe               box-sizing, font-size (x2)
   ---------------------------------------------------------------------- */