.es-body{ margin:0; font-family:"Satoshi",sans-serif; background:var(--body-color); color:var(--title-color); padding-bottom:40px; }

.es-header{ padding:28px 20px 20px; text-align:center; }
.es-header-eyebrow{ font-size:11px; font-weight:800; letter-spacing:.08em; color:var(--text-color-light); }
.es-header h1{ margin:6px 0 0; font-size:22px; font-weight:900; letter-spacing:.02em; }

.es-main{ max-width:480px; margin:0 auto; padding:0 20px; display:flex; flex-direction:column; gap:16px; }

/* -------- progreso -------- */
.es-progreso-card{ background:#fff; border-radius:22px; padding:22px 18px; box-shadow:var(--shadow); }

.es-progreso-track{ position:relative; display:flex; justify-content:space-between; margin-bottom:24px; padding:0 4px; }
.es-progreso-track::before{
    content:""; position:absolute; top:18px; left:18px; right:18px; height:3px;
    background:var(--text-color-lighten); border-radius:99px; z-index:0;
}
.es-progreso-fill{
    position:absolute; top:18px; left:18px; height:3px; width:0%;
    background:var(--first-color); border-radius:99px; z-index:1;
    transition:width .5s ease;
}
.es-progreso-paso{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; }
.es-progreso-paso i{
    width:36px; height:36px; border-radius:50%; background:#fff; border:2.5px solid var(--text-color-lighten);
    display:flex; align-items:center; justify-content:center; font-size:15px; color:var(--text-color-light);
    transition:all .3s ease;
}
.es-progreso-paso span{ font-size:9.5px; font-weight:700; color:var(--text-color-light); text-align:center; }
.es-progreso-paso.is-hecho i{ background:var(--first-color); border-color:var(--first-color); color:#fff; }
.es-progreso-paso.is-hecho span{ color:var(--title-color); }
.es-progreso-paso.is-actual i{ box-shadow:0 0 0 6px rgba(255,0,50,.15); animation:esPulso 1.6s infinite; }
@keyframes esPulso{ 0%,100%{ box-shadow:0 0 0 6px rgba(255,0,50,.15); } 50%{ box-shadow:0 0 0 10px rgba(255,0,50,.05); } }

.es-estado-actual{ display:flex; align-items:center; gap:14px; background:var(--body-color); border-radius:16px; padding:14px 16px; }
.es-estado-icon{ width:44px; height:44px; border-radius:50%; background:var(--transparent-color); color:var(--first-color); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.es-estado-titulo{ margin:0; font-size:14.5px; font-weight:800; }
.es-estado-sub{ margin:2px 0 0; font-size:12px; color:var(--text-color-light); }

.es-tiempo-prep{ display:flex; align-items:center; gap:8px; justify-content:center; margin-top:14px; font-size:13px; font-weight:700; color:var(--first-color); background:var(--transparent-color); padding:10px; border-radius:12px; }

/* -------- resumen -------- */
.es-resumen-card{ background:#fff; border-radius:22px; padding:20px; box-shadow:var(--shadow); }
.es-resumen-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.es-resumen-head span:first-child{ font-size:14px; font-weight:800; }
.es-resumen-head span:last-child{ font-size:11.5px; font-weight:700; color:var(--text-color-light); background:var(--body-color); padding:4px 10px; border-radius:999px; }
.es-linea-producto{ display:flex; justify-content:space-between; padding:8px 0; font-size:13px; border-bottom:1px solid var(--text-color-lighten); }
.es-linea-producto:last-of-type{ border-bottom:none; }
.es-resumen-total{ display:flex; justify-content:space-between; font-size:16px; font-weight:900; margin-top:12px; padding-top:12px; border-top:1.5px dashed var(--text-color-lighten); }

/* -------- botón pedir la cuenta -------- */
.es-btn-pedir-cuenta{
    display:flex; align-items:center; gap:14px;
    background:linear-gradient(135deg, #1a1620 0%, #302b31 100%);
    color:#fff; border:none; border-radius:20px; padding:16px 18px;
    cursor:pointer; box-shadow:0 14px 30px -14px rgba(0,0,0,.4);
    width:100%; text-align:left;
}
.es-btn-pedir-cuenta-icon{ width:44px; height:44px; border-radius:14px; background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.es-btn-pedir-cuenta-texto{ flex:1; }
.es-btn-pedir-cuenta-texto strong{ display:block; font-size:14.5px; font-weight:800; }
.es-btn-pedir-cuenta-texto span{ display:block; font-size:11.5px; color:rgba(255,255,255,.65); margin-top:2px; }
.es-btn-pedir-cuenta > i:last-child{ font-size:20px; color:rgba(255,255,255,.5); }
.es-btn-pedir-cuenta:active{ transform:scale(.98); }
.es-btn-pedir-cuenta.is-solicitada{ background:linear-gradient(135deg, #123d1f 0%, #1a5c31 100%); pointer-events:none; }

.es-help-text{ font-size:12px; color:var(--text-color-light); }