/* Agenda Semana Llena · mundo: el tocador del salon. Crema, ciruela, rosa empolvado y dorado.
   Titulos en DM Serif Display (con italica para el acento), interfaz en DM Sans. */
:root {
  --tinta: #2A1E2C;
  --tinta-2: #5E4A5B;
  --tinta-3: #8A7486;
  --ciruela: #7A2E56;
  --ciruela-2: #5F2042;
  --noche: #3A1430;
  --rosa: #E9A8A0;
  --blush: #F7E3DE;
  --blush-2: #FBEEEA;
  --crema: #FFF9F4;
  --papel: #FFFFFF;
  --dorado: #C8A15A;
  --dorado-t: #8A6A2C;
  --salvia: #8FAE9A;
  --salvia-t: #3F6B53;
  --salvia-s: #E3EEE6;
  --coral: #D9644E;
  --coral-t: #A8412D;
  --coral-s: #FBE4DE;
  --wa: #2E7457;
  --linea: #EED9D3;
  --linea-2: #E2C6BF;

  --f-d: "DM Serif Display", "Iowan Old Style", Georgia, serif;
  --f: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-s: 10px; --r: 16px; --r-l: 22px; --r-xl: 28px;
  --sh-1: 0 1px 2px rgba(58, 20, 48, .05), 0 4px 14px rgba(58, 20, 48, .06);
  --sh-2: 0 2px 6px rgba(58, 20, 48, .08), 0 14px 34px rgba(58, 20, 48, .12);
  --ease: cubic-bezier(.23, 1, .32, 1);
  --ease-hoja: cubic-bezier(.32, .72, 0, 1);
  --sa-t: env(safe-area-inset-top, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px);
  --tab-h: 64px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; background: var(--crema); }
body { margin: 0; min-height: 100dvh; background: var(--crema); color: var(--tinta); font: 400 15px/1.5 var(--f); -webkit-font-smoothing: antialiased; overscroll-behavior: none; }
body.con-hoja { overflow: hidden; }
::selection { background: var(--blush); color: var(--ciruela-2); }
input, select, textarea, button { font: inherit; color: inherit; caret-color: var(--ciruela); }
input, select, textarea { font-size: 16px; }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
button, a, [role="button"], label.btn { touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--ciruela); outline-offset: 2px; border-radius: 10px; }
h1, h2, h3, p { margin: 0; }
h1, h2 { font-family: var(--f-d); font-weight: 400; text-wrap: balance; letter-spacing: -.005em; }
h1 em, h2 em { font-style: italic; color: var(--ciruela); }
h1 { font-size: 32px; line-height: 1.05; }
h2 { font-size: 23px; line-height: 1.15; }
h3 { font: 600 16px/1.3 var(--f); }
ul, ol { margin: 0; padding: 0; list-style: none; }
.ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ic.sm { width: 17px; height: 17px; }
.ic.tenue { color: var(--tinta-3); }
.lead { color: var(--tinta-2); font-size: 16px; line-height: 1.5; text-wrap: pretty; }
.nota { color: var(--tinta-2); font-size: 14px; line-height: 1.5; text-wrap: pretty; }
.centro { text-align: center; }
mark { background: var(--blush); color: var(--ciruela); border-radius: 4px; padding: 0 2px; }
* { scrollbar-width: none; }
::-webkit-scrollbar { display: none; }

/* ---------- marco ---------- */
#app { max-width: 480px; margin: 0 auto; min-height: 100dvh; position: relative; }
.vista { padding: calc(var(--sa-t) + 8px) 16px 0; opacity: 0; transform: translateY(6px); transition: opacity 220ms var(--ease), transform 260ms var(--ease); }
.vista.in { opacity: 1; transform: none; }
.pie-espacio { height: calc(var(--tab-h) + var(--sa-b) + 92px); }

.cab { display: flex; align-items: center; gap: 12px; padding: 10px 0 14px; }
.cab-t { flex: 1; min-width: 0; }
.cab h1 { font-size: 34px; }
.cab-t p { color: var(--tinta-2); font-size: 14px; margin-top: 2px; }

.btn-ic { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--tinta); flex: none; transition: transform 120ms var(--ease), background 160ms; }
.btn-ic:active { transform: scale(.94); background: var(--blush); }
.btn-ic.chico { width: 36px; height: 36px; }
.btn-ic.claro { color: #FFF6F0; background: rgba(42, 30, 44, .28); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* ---------- botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 14px; background: var(--ciruela); color: #FFF6F0; font-weight: 600; font-size: 15px; transition: transform 120ms var(--ease), background 160ms, box-shadow 160ms; box-shadow: 0 1px 1px rgba(58, 20, 48, .12), 0 6px 16px rgba(122, 46, 86, .22); flex: 1; white-space: nowrap; }
.btn:active { transform: scale(.97); background: var(--ciruela-2); }
.btn.grande { width: 100%; min-height: 54px; font-size: 16px; border-radius: 16px; margin-top: 10px; }
.btn.suave { background: var(--blush); color: var(--ciruela); box-shadow: none; }
.btn.suave:active { background: #F2D3CC; }
.btn.linea { background: transparent; color: var(--ciruela); box-shadow: inset 0 0 0 1.5px var(--linea-2); }
.btn.dorado { background: var(--dorado); color: var(--tinta); box-shadow: 0 1px 1px rgba(0, 0, 0, .15), 0 8px 20px rgba(200, 161, 90, .28); }
.btn.dorado:active { background: #B88F48; }
.btn.wa { background: var(--wa); box-shadow: 0 6px 16px rgba(46, 116, 87, .22); }
.btn.wa:active { background: #245E46; }
.btn.peligro { background: var(--coral-t); box-shadow: none; }
.btn.peligro-t { color: var(--coral-t); width: 100%; margin-top: 10px; }
.btn.chico { min-height: 36px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.fila-btn { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.link { color: var(--ciruela); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; }
.link:active { opacity: .6; }
.bloque-link { display: flex; margin: 8px auto 0; }
label.btn.archivo { position: relative; overflow: hidden; }
label.btn.archivo input { position: absolute; inset: 0; opacity: 0; }

.btn-wa, .btn-ok { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; transition: transform 120ms var(--ease), background 160ms; }
.btn-wa { background: var(--wa); color: #fff; }
.btn-wa .ic { width: 22px; height: 22px; }
.btn-ok { box-shadow: inset 0 0 0 1.5px var(--linea-2); color: var(--ciruela); }
.btn-wa:active, .btn-ok:active { transform: scale(.92); }
.btn-ok:active { background: var(--salvia-s); color: var(--salvia-t); }

.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--blush); color: var(--ciruela); white-space: nowrap; }
.chip.coral { background: var(--coral-s); color: var(--coral-t); }
.chip.salvia { background: var(--salvia-s); color: var(--salvia-t); }
.chip.candado { background: var(--noche); color: var(--dorado); margin-left: 4px; font-size: 12px; padding: 4px 10px; }
.chip .ic { width: 14px; height: 14px; }

/* ---------- tab bar + fab ---------- */
.tabbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 480px; z-index: 20; display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 6px calc(6px + var(--sa-b)); background: rgba(255, 249, 244, .9); backdrop-filter: saturate(1.4) blur(18px); -webkit-backdrop-filter: saturate(1.4) blur(18px); border-top: 1px solid var(--linea); }
.tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0 4px; color: var(--tinta-3); font-size: 11px; font-weight: 600; letter-spacing: .01em; transition: color 160ms; }
.tab .ic { width: 24px; height: 24px; padding: 2px; box-sizing: content-box; border-radius: 12px; transition: background 200ms var(--ease), transform 160ms var(--ease); }
.tab.on { color: var(--ciruela); }
.tab.on .ic { background: var(--blush); width: 40px; }
.tab:active .ic { transform: scale(.9); }
.tab .punto { position: absolute; top: 6px; left: calc(50% + 10px); width: 8px; height: 8px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 2px var(--crema); }
.fab { position: fixed; z-index: 19; right: max(16px, calc(50% - 240px + 16px)); bottom: calc(var(--tab-h) + var(--sa-b) + 16px); display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 20px 0 16px; border-radius: 26px; background: var(--ciruela); color: #FFF6F0; font-weight: 600; box-shadow: 0 2px 4px rgba(58, 20, 48, .15), 0 12px 28px rgba(122, 46, 86, .35); transition: transform 140ms var(--ease); }
.fab:active { transform: scale(.95); }

/* ---------- HOY ---------- */
.vista[data-ruta="hoy"] { padding-top: 0; }
.hero { position: relative; margin: 0 -16px; border-radius: 0 0 var(--r-xl) var(--r-xl); overflow: hidden; color: #FFF6F0; background: var(--noche); }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(58, 20, 48, .25) 0%, rgba(58, 20, 48, .55) 45%, rgba(46, 14, 38, .94) 100%); }
.hero-in { position: relative; z-index: 1; padding: calc(var(--sa-t) + 10px) 20px 20px; }
.hero-top { display: flex; align-items: center; justify-content: space-between; }
.fecha { font-size: 14px; font-weight: 600; color: rgba(255, 246, 240, .9); }
.fecha::first-letter { text-transform: uppercase; }
.hero h1 { font-size: 36px; margin-top: 64px; color: #FFF6F0; }
.hero h1 em { color: var(--rosa); }
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 20px 0 0; border-top: 1px solid rgba(255, 246, 240, .2); padding-top: 14px; }
.hero-stats div + div { border-left: 1px solid rgba(255, 246, 240, .2); padding-left: 12px; }
.hero-stats dt { font-size: 12px; color: rgba(255, 246, 240, .78); line-height: 1.25; }
.hero-stats div { display: flex; flex-direction: column; gap: 4px; }
.hero-stats dd { margin: 0; font: 400 30px/1 var(--f-d); color: #FFF6F0; font-variant-numeric: tabular-nums; }

.bloque { margin-top: 26px; }
.bloque > h2 { margin-bottom: 10px; }
.bloque-t { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.bloque-t h2 { flex: 1; }
.cuenta { min-width: 26px; height: 26px; border-radius: 13px; background: var(--coral); color: #fff; font-weight: 700; font-size: 13px; display: grid; place-items: center; padding: 0 8px; }
.bloque > .nota { margin-bottom: 12px; }
.sub-t { margin: 18px 0 8px; font-size: 14px; color: var(--tinta-2); }

.lista { display: flex; flex-direction: column; gap: 10px; }
.conf-it { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; background: var(--papel); border-radius: var(--r); box-shadow: var(--sh-1); transition: opacity 220ms var(--ease), transform 220ms var(--ease); }
.conf-it.sale { opacity: 0; transform: translateX(24px) scale(.98); }
.conf-h { display: flex; flex-direction: column; align-items: flex-start; width: 52px; flex: none; }
.conf-h .hora { font: 400 22px/1 var(--f-d); font-variant-numeric: tabular-nums; }
.conf-h .dia { font-size: 12px; color: var(--tinta-3); margin-top: 3px; text-transform: capitalize; }
.conf-c { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.conf-c b { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.conf-c > span:not(.chip) { font-size: 13px; color: var(--tinta-2); }
.conf-c .chip { margin-top: 5px; }
.conf-a { display: flex; gap: 8px; }

.vacio { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--r); background: var(--blush-2); }
.vacio img { width: 76px; height: 76px; border-radius: 14px; object-fit: cover; flex: none; }
.vacio p { font-size: 14px; color: var(--tinta-2); }
.vacio b { color: var(--tinta); }
.vacio.chico { padding: 14px 16px; }

/* linea del dia */
.linea { display: flex; flex-direction: column; gap: 8px; }
.linea li > button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r); transition: transform 120ms var(--ease), background 160ms; }
.linea li > button:active { transform: scale(.985); }
.linea .hora { width: 50px; flex: none; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 15px; display: flex; flex-direction: column; }
.linea .hora small { font-weight: 500; font-size: 11px; color: var(--tinta-3); }
.li-cita > button { background: var(--papel); box-shadow: var(--sh-1); }

.cita-c { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cita-c b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cita-c span { font-size: 13px; color: var(--tinta-2); }
.estado-c i { font-style: normal; font-size: 12px; font-weight: 600; }
.estado-c .ok { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--salvia-s); color: var(--salvia-t); }
.estado-c .pend { color: var(--coral-t); }
.estado-c .falto { color: var(--coral-t); }
.li-cita.pasada > button { opacity: .55; box-shadow: none; background: transparent; outline: 1px solid var(--linea); }
.li-libre > button { border: 1.5px dashed var(--rosa); background: repeating-linear-gradient(135deg, rgba(233, 168, 160, .10) 0 8px, transparent 8px 16px); color: var(--ciruela); }
.li-libre .hora { color: var(--ciruela); }
.libre-c { flex: 1; font-size: 13px; color: var(--ciruela); }
.libre-c b { font-weight: 700; display: block; font-size: 14px; }
.libre-mas { width: 34px; height: 34px; border-radius: 50%; background: var(--ciruela); color: #FFF6F0; display: grid; place-items: center; }
.libre-mas .ic { width: 18px; height: 18px; }

/* tarjetas de Hoy */
.tarjeta { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 14px; border-radius: var(--r-l); background: var(--papel); box-shadow: var(--sh-1); transition: transform 140ms var(--ease); }
.tarjeta:active { transform: scale(.985); }
.tarjeta > div { flex: 1; min-width: 0; }
.tarjeta img { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; flex: none; }
.tarjeta h3 { font-size: 16px; }
.tarjeta p { font-size: 13px; color: var(--tinta-2); margin-top: 2px; }
.alerta-dormida { margin-top: 26px; background: var(--coral-s); box-shadow: none; }
.alerta-dormida h3 { color: var(--coral-t); }
.plata { background: var(--noche); color: #FFF6F0; padding: 18px 18px; align-items: flex-end; }
.tarjeta.plata .plata-l { font-size: 13px; color: rgba(255, 246, 240, .75); }
.tarjeta.plata .plata-n { font: 400 26px/1.15 var(--f-d); margin-top: 2px; }
.plata-n b { font-weight: 400; color: var(--dorado); font-size: 34px; }
.tarjeta.plata .plata-m { font-size: 15px; color: rgba(255, 246, 240, .88); margin-top: 2px; }
.plata-m b { color: #FFF6F0; }
.plata-cta { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: 14px; color: var(--dorado); white-space: nowrap; }
.plan-mini { background: var(--blush-2); box-shadow: none; }

/* ---------- AGENDA ---------- */
.seg { display: inline-flex; background: var(--blush); border-radius: 12px; padding: 3px; gap: 2px; }
.seg button { min-height: 36px; padding: 0 14px; border-radius: 9px; font-weight: 600; font-size: 14px; color: var(--ciruela); transition: background 180ms var(--ease), color 180ms, box-shadow 180ms; display: inline-flex; align-items: center; gap: 6px; }
.seg button.on { background: var(--papel); color: var(--tinta); box-shadow: 0 1px 2px rgba(58, 20, 48, .1), 0 2px 8px rgba(58, 20, 48, .08); }
.seg.ancho { display: flex; width: 100%; margin-bottom: 14px; }
.seg.ancho button { flex: 1; justify-content: center; }
.seg .n { font-size: 12px; background: rgba(122, 46, 86, .12); border-radius: 8px; padding: 1px 7px; }
.semana-nav { display: flex; align-items: center; gap: 6px; background: var(--papel); border-radius: var(--r); padding: 4px; box-shadow: var(--sh-1); }
.semana-nav > div { flex: 1; text-align: center; display: flex; flex-direction: column; }
.semana-nav b { font-weight: 600; font-size: 15px; }
.semana-nav span { font-size: 12px; color: var(--ciruela); font-weight: 600; }
.leyenda { display: flex; gap: 14px; justify-content: center; margin: 12px 0 10px; font-size: 12px; color: var(--tinta-2); }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.lg-c { background: var(--ciruela); }
.lg-p { background: var(--rosa); }
.lg-l { border: 1.5px dashed var(--rosa); background: repeating-linear-gradient(135deg, rgba(233, 168, 160, .35) 0 3px, transparent 3px 6px); }
.grilla { display: flex; gap: 4px; background: var(--papel); border-radius: var(--r-l); padding: 10px 6px 10px 4px; box-shadow: var(--sh-1); }
.horas { position: relative; width: 22px; margin-top: 46px; flex: none; }
.horas span { position: absolute; right: 2px; transform: translateY(-50%); font-size: 10px; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.cols { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.col-h { display: flex; flex-direction: column; align-items: center; height: 42px; margin-bottom: 4px; border-radius: 10px; justify-content: center; width: 100%; }
.col-h span { font-size: 11px; color: var(--tinta-3); font-weight: 600; }
.col-h b { font: 400 17px/1.1 var(--f-d); }
.col.hoy .col-h { background: var(--ciruela); color: #FFF6F0; }
.col.hoy .col-h span { color: rgba(255, 246, 240, .8); }
.col-b { position: relative; background: repeating-linear-gradient(180deg, transparent 0 47px, var(--linea) 47px 48px); border-radius: 6px; }
.col-b > * { position: absolute; left: 1px; right: 1px; border-radius: 7px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 3px; }
.b-cita { background: var(--ciruela); color: #FFF6F0; box-shadow: 0 1px 2px rgba(58, 20, 48, .2); transition: transform 120ms var(--ease); }
.b-cita.pendiente { background: var(--rosa); color: var(--tinta); }
.b-cita.pasada { opacity: .42; }
.b-cita:active, .b-libre:active { transform: scale(.94); }
.bc-n { font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.bc-h { font-size: 9.5px; opacity: .85; font-variant-numeric: tabular-nums; }
.b-libre { border: 1.5px dashed var(--rosa); background: repeating-linear-gradient(135deg, rgba(233, 168, 160, .28) 0 4px, rgba(255, 255, 255, .6) 4px 8px); color: var(--ciruela); transition: transform 120ms var(--ease); }
.b-libre span { font-size: 9.5px; font-weight: 700; background: rgba(255, 249, 244, .9); border-radius: 4px; padding: 0 2px; }
.cerrado { background: repeating-linear-gradient(135deg, #F4EEEC 0 5px, #FBF7F5 5px 10px); color: var(--tinta-3); justify-content: center !important; }
.cerrado span { writing-mode: vertical-rl; font-size: 11px; font-weight: 600; letter-spacing: .08em; }
.nota.centro { margin-top: 12px; }

.tira { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity; margin: 0 -16px; padding: 2px 16px 6px; }
.tira .dia { flex: none; width: 50px; height: 70px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: var(--papel); box-shadow: var(--sh-1); scroll-snap-align: center; transition: background 180ms var(--ease), transform 120ms var(--ease); }
.tira .dia:active { transform: scale(.94); }
.tira .dia span { font-size: 11px; color: var(--tinta-3); font-weight: 600; }
.tira .dia b { font: 400 20px/1.1 var(--f-d); }
.tira .dia.hoy span { color: var(--ciruela); }
.tira .dia.on { background: var(--ciruela); color: #FFF6F0; }
.tira .dia.on span { color: rgba(255, 246, 240, .8); }
.dots { display: flex; gap: 3px; height: 5px; }
.dots em { width: 5px; height: 5px; border-radius: 50%; }
.dots .d1 { background: var(--ciruela); }
.dots .d2 { background: var(--rosa); }
.dia.on .d1 { background: #FFF6F0; }
.dia-t { margin: 18px 0 12px; }
.dia-t p { font-size: 14px; color: var(--tinta-2); margin-top: 2px; }

.candado-mini { width: 100%; display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 12px 14px; border-radius: var(--r); background: var(--noche); color: #FFF6F0; transition: transform 140ms var(--ease); }
.candado-mini:active { transform: scale(.985); }
.cm-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(200, 161, 90, .16); color: var(--dorado); flex: none; }
.candado-mini > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.candado-mini b { font-weight: 600; font-size: 14px; }
.candado-mini small { font-size: 12px; color: rgba(255, 246, 240, .74); line-height: 1.35; }
.candado-mini em { font-style: normal; font-weight: 700; color: var(--dorado); font-size: 13px; white-space: nowrap; }

/* ---------- CLIENTAS ---------- */
.av { width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--blush); color: var(--ciruela); font-weight: 700; font-size: 14px; letter-spacing: .02em; }
.av.grande { width: 58px; height: 58px; font: 400 22px/1 var(--f-d); }
.buscar { display: flex; align-items: center; gap: 8px; padding: 0 14px; height: 48px; border-radius: 14px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--linea); color: var(--tinta-3); margin-bottom: 12px; }
.buscar input { flex: 1; border: 0; background: none; outline: none; height: 100%; color: var(--tinta); min-width: 0; }
.buscar input::placeholder { color: var(--tinta-3); }
.buscar:focus-within { box-shadow: inset 0 0 0 1.5px var(--ciruela); }
.lista.cl { gap: 0; background: var(--papel); border-radius: var(--r-l); box-shadow: var(--sh-1); overflow: hidden; }
.lista.cl li + li { border-top: 1px solid var(--linea); }
.cl-it { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; transition: background 160ms; }
.cl-it:active { background: var(--blush-2); }
.cl-c { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cl-c b { font-weight: 600; }
.cl-c span { font-size: 13px; color: var(--tinta-2); }
.dor-it { background: var(--papel); border-radius: var(--r-l); box-shadow: var(--sh-1); padding: 14px; }
.dor-top { display: flex; gap: 12px; align-items: center; width: 100%; }
.dor-top > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.dor-top b { font: 400 19px/1.2 var(--f-d); }
.dor-top small { font-size: 13px; color: var(--tinta-2); }
.dor-a { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
.dor-a .chip { flex-basis: 100%; justify-content: flex-start; width: fit-content; flex-grow: 0; }
.dor-a .btn { min-height: 44px; }
.dor-a .btn.wa { flex: 1.4; }
.lista.dor.hecha .dor-it { box-shadow: none; background: var(--blush-2); }

/* ---------- LLENAR ---------- */
.dinero { background: var(--noche); color: #FFF6F0; border-radius: var(--r-xl); padding: 22px 20px 18px; position: relative; overflow: hidden; }
.dinero::before { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; border: 1px solid rgba(200, 161, 90, .25); }
.dinero::after { content: ""; position: absolute; right: -30px; top: -30px; width: 140px; height: 140px; border-radius: 50%; border: 1px solid rgba(200, 161, 90, .18); }
.d-l { font-size: 14px; color: rgba(255, 246, 240, .75); }
.d-n { font: 400 30px/1.1 var(--f-d); margin-top: 2px; }
.d-n b { font-weight: 400; font-size: 56px; color: var(--dorado); line-height: 1; margin-right: 4px; }
.d-m { font-size: 17px; margin-top: 4px; color: rgba(255, 246, 240, .9); }
.d-m b { color: #FFF6F0; font-weight: 700; }
.barras { display: flex; gap: 6px; align-items: flex-end; margin: 20px 0 6px; height: 96px; }
.barra { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; justify-content: flex-end; height: 100%; }
.barra i { width: 100%; max-width: 30px; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, var(--dorado), #A9843F); transform-origin: bottom; animation: crecer 420ms var(--ease) both; }
.barra:nth-child(2) i { animation-delay: 30ms; } .barra:nth-child(3) i { animation-delay: 60ms; } .barra:nth-child(4) i { animation-delay: 90ms; } .barra:nth-child(5) i { animation-delay: 120ms; } .barra:nth-child(6) i { animation-delay: 150ms; } .barra:nth-child(7) i { animation-delay: 180ms; }
.barra i.cero { background: rgba(255, 246, 240, .18); }
.barra b { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.barra span { font-size: 11px; color: rgba(255, 246, 240, .7); }
@keyframes crecer { from { transform: scaleY(.2); opacity: 0; } to { transform: none; opacity: 1; } }
.d-calc { font-size: 12px; color: rgba(255, 246, 240, .62); margin-top: 8px; line-height: 1.4; }
.dinero .btn.grande { margin-top: 16px; }
.esp-it { display: flex; align-items: center; gap: 12px; background: var(--papel); border-radius: var(--r); box-shadow: var(--sh-1); padding: 10px 10px 10px 12px; transition: opacity 200ms; }
.esp-it.enviado { opacity: .6; }
.esp-c { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.esp-c b { font-weight: 600; }
.esp-c span { font-size: 13px; color: var(--tinta-2); }
.esp-c small { font-size: 12px; color: var(--salvia-t); font-weight: 600; }
.esp-a { display: flex; gap: 4px; align-items: center; }
.plan-grande { flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; margin-top: 26px; }
.plan-grande img { width: 100%; height: 150px; border-radius: 0; object-fit: cover; }
.plan-grande > div { padding: 14px 16px 12px; }
.plan-grande h3 { font: 400 24px/1.1 var(--f-d); }
.plan-grande p { font-size: 14px; }

/* ---------- PLAN DICIEMBRE ---------- */
.vista[data-ruta="diciembre"] { padding-top: 0; }
.plan-hero { position: relative; margin: 0 -16px; height: 300px; overflow: hidden; border-radius: 0 0 var(--r-xl) var(--r-xl); }
.plan-hero img { width: 100%; height: 100%; object-fit: cover; }
.plan-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(58, 20, 48, .1) 30%, rgba(46, 14, 38, .9) 100%); }
.plan-hero .volver { position: absolute; z-index: 2; top: calc(var(--sa-t) + 10px); left: 12px; }
.plan-hero-t { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 20px; color: #FFF6F0; }
.plan-hero-t h1 { font-size: 42px; color: #FFF6F0; }
.plan-hero-t h1 em { color: var(--dorado); }
.plan-hero-t p { font-size: 15px; color: rgba(255, 246, 240, .88); margin-top: 6px; }
.fases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 16px; counter-reset: f; }
.fases li { padding: 10px 8px; border-radius: 14px; background: var(--papel); box-shadow: var(--sh-1); display: flex; flex-direction: column; gap: 2px; }
.fases b { font: 400 15px/1.15 var(--f-d); }
.fases span { font-size: 11px; color: var(--tinta-3); }
.fases li.on { background: var(--ciruela); color: #FFF6F0; }
.fases li.on span { color: rgba(255, 246, 240, .8); }
.fases li.hecha { opacity: .55; box-shadow: none; }
.fase-txt { margin-top: 12px; font-size: 14px; color: var(--tinta-2); }
.fase-txt b { color: var(--tinta); }
.checks { display: flex; flex-direction: column; gap: 8px; }
.ck { width: 100%; display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: var(--papel); border-radius: var(--r); box-shadow: var(--sh-1); transition: background 180ms; }
.ck > i { width: 26px; height: 26px; border-radius: 8px; flex: none; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--linea-2); color: transparent; transition: background 180ms var(--ease), color 180ms, box-shadow 180ms; }
.ck.on > i { background: var(--salvia-t); color: #fff; box-shadow: none; }
.ck span { display: flex; flex-direction: column; }
.ck b { font-weight: 600; }
.ck small { font-size: 13px; color: var(--tinta-2); line-height: 1.4; }
.ck.on { background: var(--salvia-s); box-shadow: none; }
.tono { margin-top: 6px; }
.semanas { display: flex; flex-direction: column; gap: 8px; }
.sem details { background: var(--papel); border-radius: var(--r); box-shadow: var(--sh-1); overflow: hidden; }
.sem summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; min-height: 52px; }
.sem summary::-webkit-details-marker { display: none; }
.sem-n { flex: 1; display: flex; flex-direction: column; }
.sem-n em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--coral-t); }
.sem-n b { font-weight: 600; }
.sem .rot { transition: transform 200ms var(--ease); color: var(--tinta-3); }
.sem details[open] .rot { transform: rotate(90deg); }
.sem .ok { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--salvia-s); color: var(--salvia-t); }
.sem.actual details { box-shadow: var(--sh-2), inset 0 0 0 1.5px var(--rosa); }
.sem.hecha summary b { color: var(--tinta-3); }
.sem-d { margin: 0; padding: 0 16px; display: flex; flex-direction: column; gap: 10px; }
.sem-d div { display: grid; grid-template-columns: 62px 1fr; gap: 8px; }
.sem-d dt { font-size: 12px; font-weight: 700; color: var(--dorado-t); padding-top: 2px; }
.sem-d dd { margin: 0; font-size: 14px; }
.sem-a { display: flex; gap: 8px; padding: 12px 16px 16px; flex-wrap: wrap; }
.sem-a .btn { min-height: 44px; font-size: 14px; }
.msg { margin: 14px 16px 0; background: var(--blush-2); border-radius: 4px 18px 18px 18px; padding: 12px 14px; }
.bloque > .msg { margin: 14px 0 0; }
.msg-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.msg-h b { font-size: 13px; color: var(--ciruela); }
.msg p { font-size: 14px; line-height: 1.5; -webkit-user-select: text; user-select: text; }
.msg .aviso { display: block; margin-top: 8px; font-size: 12px; color: var(--coral-t); line-height: 1.4; }
.pasos { counter-reset: p; display: flex; flex-direction: column; gap: 10px; }
.pasos li { counter-increment: p; display: grid; grid-template-columns: 30px 1fr; gap: 2px 10px; }
.pasos li::before { content: counter(p); grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; background: var(--ciruela); color: #FFF6F0; display: grid; place-items: center; font: 400 15px/1 var(--f-d); }
.pasos b { font-weight: 600; }
.pasos span { font-size: 13px; color: var(--tinta-2); }
.ideas { display: flex; flex-direction: column; gap: 6px; }
.ideas li { padding: 10px 12px; border-radius: 12px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--linea); font-size: 14px; }
.ideas.num { counter-reset: n; }
.ideas.num li { counter-increment: n; display: flex; gap: 10px; }
.ideas.num li::before { content: counter(n); font: 400 18px/1.2 var(--f-d); color: var(--dorado-t); }

.teaser { width: 100%; display: block; margin-top: 26px; border-radius: var(--r-xl); overflow: hidden; background: var(--noche); color: #FFF6F0; box-shadow: var(--sh-2); transition: transform 140ms var(--ease); }
.teaser:active { transform: scale(.985); }
.teaser-img { position: relative; height: 210px; overflow: hidden; }
.teaser-img img { width: 100%; height: 100%; object-fit: cover; filter: blur(5px) saturate(1.1); transform: scale(1.1); }
.gc { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-4deg); width: 230px; padding: 16px 18px; border-radius: 14px; background: rgba(255, 249, 244, .94); color: var(--tinta); box-shadow: 0 10px 30px rgba(42, 30, 44, .3); display: flex; flex-direction: column; gap: 2px; filter: blur(1.4px); }
.gc small { font-size: 9px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--dorado-t); }
.gc b { font: 400 26px/.95 var(--f-d); margin: 4px 0; }
.gc b em { color: var(--ciruela); }
.gc span { font-size: 11px; font-weight: 600; color: var(--tinta-2); }
.gc.grande { width: 250px; }
.sello { position: absolute; top: 12px; right: 12px; display: inline-flex; gap: 5px; align-items: center; padding: 6px 10px; border-radius: 999px; background: rgba(42, 30, 44, .7); color: var(--dorado); font-size: 12px; font-weight: 700; backdrop-filter: blur(6px); }
.teaser-t { padding: 16px 18px 18px; text-align: left; }
.teaser-t h3 { font: 400 22px/1.15 var(--f-d); }
.teaser-t p { font-size: 14px; color: rgba(255, 246, 240, .82); margin-top: 4px; }
.precio { display: inline-flex; margin-top: 12px; padding: 8px 14px; border-radius: 10px; background: var(--dorado); color: var(--tinta); font-weight: 700; font-size: 14px; font-style: normal; }

/* ---------- TIENDA ---------- */
.incluidos { display: flex; flex-direction: column; gap: 8px; }
.inc { display: flex; gap: 12px; align-items: center; padding: 10px 12px 10px 10px; border-radius: var(--r); background: var(--papel); box-shadow: var(--sh-1); }
.inc img { width: 54px; height: 54px; border-radius: 12px; object-fit: cover; }
.inc span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.inc b { font-weight: 600; }
.inc small { font-size: 12px; color: var(--tinta-2); line-height: 1.35; }
.prods { display: flex; flex-direction: column; gap: 12px; }
.prod { width: 100%; display: flex; gap: 14px; padding: 12px; border-radius: var(--r-l); background: var(--papel); box-shadow: var(--sh-1); transition: transform 140ms var(--ease); text-align: left; }
.prod:active { transform: scale(.985); }
.prod-img { position: relative; width: 96px; height: 116px; border-radius: 14px; overflow: hidden; flex: none; }
.prod-img img { width: 100%; height: 100%; object-fit: cover; }
.prod-img.borroso img { filter: blur(4px); transform: scale(1.1); }
.prod-img .lock { position: absolute; left: 6px; bottom: 6px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--noche); color: var(--dorado); }
.prod-c { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.prod-c b { font: 400 18px/1.2 var(--f-d); }
.prod-c span { font-size: 13px; color: var(--tinta-2); line-height: 1.4; }
.prod-c .precio { margin-top: auto; padding: 6px 12px; }
.prod-c .chip { margin-top: auto; }

/* ---------- AJUSTES / formularios ---------- */
.form { display: flex; flex-direction: column; gap: 12px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--tinta-2); }
.form label small { font-weight: 400; color: var(--tinta-3); }
.in { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 0; background: var(--papel); box-shadow: inset 0 0 0 1px var(--linea-2); color: var(--tinta); outline: none; transition: box-shadow 160ms; -webkit-appearance: none; appearance: none; }
.in:focus { box-shadow: inset 0 0 0 1.5px var(--ciruela), 0 0 0 4px rgba(122, 46, 86, .1); }
.in::placeholder { color: var(--tinta-3); }
select.in { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%237A2E56' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
textarea.in { resize: vertical; line-height: 1.45; }
.servs { display: flex; flex-direction: column; gap: 8px; }
.serv { display: grid; grid-template-columns: 1fr 1fr 36px; grid-template-areas: 'n n x' 'p d x'; gap: 6px; align-items: center; padding: 8px; border-radius: 16px; background: var(--blush-2); }
.serv .nom { grid-area: n; font-weight: 600; }
.serv .mini:nth-of-type(1) { grid-area: p; }
.serv .mini:nth-of-type(2) { grid-area: d; }
.serv .btn-ic { grid-area: x; }
.serv .in { min-height: 46px; padding: 8px 10px; }
.mini { display: flex; align-items: center; gap: 2px; background: var(--papel); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--linea-2); padding: 0 8px; font-size: 13px; color: var(--tinta-3); }
.mini:focus-within { box-shadow: inset 0 0 0 1.5px var(--ciruela); }
.mini .in { box-shadow: none !important; padding: 8px 2px; min-width: 0; background: none; font-variant-numeric: tabular-nums; }
.horario { display: flex; flex-direction: column; gap: 6px; }
.horario li { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 4px 6px 4px 10px; background: var(--papel); border-radius: 14px; box-shadow: var(--sh-1); }
.horario li.off { box-shadow: none; background: var(--blush-2); }
.horario .tgl { flex: 1; }
.in.hora { width: 92px; min-height: 42px; padding: 6px 26px 6px 12px; font-variant-numeric: tabular-nums; background-position: right 10px center; }
select.in.hora { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%237A2E56' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; }
.horario .a { font-size: 13px; color: var(--tinta-3); }
.cerr { font-size: 13px; color: var(--tinta-3); padding-right: 10px; }
.tgl { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; font-size: 15px; }
.tgl > i { width: 40px; height: 24px; border-radius: 12px; background: var(--linea-2); position: relative; flex: none; transition: background 200ms var(--ease); }
.tgl > i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform 220ms var(--ease); }
.tgl.on > i { background: var(--ciruela); }
.tgl.on > i::after { transform: translateX(16px); }
.tgl.largo { align-items: flex-start; padding: 14px; background: var(--papel); border-radius: var(--r); box-shadow: var(--sh-1); text-align: left; }
.tgl.largo span { display: flex; flex-direction: column; }
.tgl.largo small { font-weight: 400; font-size: 13px; color: var(--tinta-2); }
.aviso-mem { display: flex; gap: 8px; padding: 12px 14px; border-radius: var(--r); background: var(--coral-s); color: var(--coral-t); font-size: 13px; font-weight: 600; }

/* ---------- ONBOARDING ---------- */
.ob { padding: 0 0 calc(110px + var(--sa-b)); min-height: 100dvh; }
.ob-img { position: relative; height: 31svh; min-height: 200px; max-height: 280px; overflow: hidden; border-radius: 0 0 var(--r-xl) var(--r-xl); }
.ob-img img { width: 100%; height: 100%; object-fit: cover; }
.ob-atras { position: absolute; top: calc(var(--sa-t) + 10px); left: 12px; }
.ob-t { padding: 18px 20px 0; }
.progreso { display: flex; gap: 6px; margin-bottom: 14px; }
.progreso i { height: 4px; flex: 1; border-radius: 2px; background: var(--linea); transition: background 300ms var(--ease); }
.progreso i.on { background: var(--ciruela); }
.ob h1 { font-size: 36px; }
.ob .lead { margin: 6px 0 18px; }
.ob fieldset { border: 0; padding: 0; margin: 0; }
.ob legend { font-size: 13px; font-weight: 600; color: var(--tinta-2); margin-bottom: 8px; padding: 0; }
.ob-pie { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 480px; padding: 12px 20px calc(14px + var(--sa-b)); background: linear-gradient(180deg, rgba(255, 249, 244, 0), var(--crema) 30%); }
.ob-err { color: var(--coral-t); font-size: 14px; font-weight: 600; min-height: 20px; margin-top: 10px; }
.ob0 { padding: 0; display: flex; flex-direction: column; }
.ob0-img { height: 50svh; min-height: 300px; max-height: 440px; overflow: hidden; border-radius: 0 0 var(--r-xl) var(--r-xl); }
.ob0-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.ob0-t { padding: 22px 22px calc(24px + var(--sa-b)); }
.marca { font-size: 12px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--dorado-t); margin-bottom: 10px; }
.ob0 h1 { font-size: 44px; line-height: 1; }
.ob0 .lead { margin: 12px 0 10px; }
.ob0 .nota { margin-top: 10px; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; margin: 0 -20px; padding: 2px 20px 4px; scroll-snap-type: x proximity; }
.chips.wrap { flex-wrap: wrap; }
.chip-sel { flex: none; display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 44px; padding: 8px 14px; border-radius: 12px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--linea-2); font-weight: 600; font-size: 14px; scroll-snap-align: start; transition: background 160ms var(--ease), box-shadow 160ms, color 160ms, transform 120ms var(--ease); }
.chip-sel small { font-weight: 500; font-size: 12px; color: var(--tinta-3); }
.chip-sel:active { transform: scale(.96); }
.chip-sel.on { background: var(--ciruela); color: #FFF6F0; box-shadow: none; }
.chip-sel.on small { color: rgba(255, 246, 240, .8); }
.chip-sel.hora { min-width: 70px; align-items: center; font-variant-numeric: tabular-nums; }
.chip-sel.otra { flex-direction: row; gap: 6px; align-items: center; color: var(--tinta-2); }
.chip-sel.otra select { border: 0; background: none; font-weight: 600; color: var(--ciruela); font-size: 16px; -webkit-appearance: none; appearance: none; padding: 0 2px; }
.chip-dia { flex: none; width: 54px; height: 58px; border-radius: 14px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--linea-2); display: flex; flex-direction: column; align-items: center; justify-content: center; scroll-snap-align: start; transition: background 160ms var(--ease), transform 120ms var(--ease); }
.chip-dia:active { transform: scale(.95); }
.chip-dia small { font-size: 11px; font-weight: 600; color: var(--tinta-3); }
.chip-dia b { font: 400 19px/1.1 var(--f-d); }
.chip-dia.on { background: var(--ciruela); color: #FFF6F0; box-shadow: none; }
.chip-dia.on small { color: rgba(255, 246, 240, .8); }
.chip-nueva { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 12px; background: var(--blush); color: var(--ciruela); font-weight: 600; font-size: 14px; flex: none; }

/* ---------- hoja (bottom sheet) ---------- */
.fondo { position: fixed; inset: 0; z-index: 40; background: rgba(42, 30, 44, .42); opacity: 0; transition: opacity 240ms var(--ease); }
.fondo.on { opacity: 1; }
.hoja { position: fixed; z-index: 41; left: 50%; bottom: 0; width: 100%; max-width: 480px; max-height: 90dvh; display: flex; flex-direction: column; background: var(--crema); border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: 0 -10px 40px rgba(42, 30, 44, .2); transform: translate(-50%, 104%); transition: transform 300ms var(--ease-hoja); visibility: hidden; }
.hoja.abierta { transform: translate(-50%, 0); visibility: visible; }
.hoja.alta { height: 90dvh; }
.hoja-asa { width: 40px; height: 5px; border-radius: 3px; background: var(--linea-2); margin: 8px auto 0; flex: none; }
.hoja-cab { display: flex; align-items: center; gap: 8px; padding: 6px 10px 4px 20px; flex: none; }
.hoja-titulo { flex: 1; font-size: 22px; }
.hoja-c { overflow-y: auto; overscroll-behavior: contain; padding: 6px 20px calc(24px + var(--sa-b)); flex: 1; }
.hoja-c > h2 { margin-top: 14px; }
.hoja-c > .lead { margin-top: 6px; }
.hoja-img { position: relative; height: 190px; border-radius: var(--r-l); overflow: hidden; }
.hoja-img img { width: 100%; height: 100%; object-fit: cover; }
.hoja-img.borroso img { filter: blur(5px); transform: scale(1.1); }
.incluye { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 6px; }
.incluye li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
.incluye .ic { color: var(--salvia-t); margin-top: 1px; }
textarea.copia { font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; margin: 10px 0; }

.nc-paso { margin-bottom: 18px; }
.nc-l { display: block; font-size: 13px; font-weight: 700; color: var(--tinta-2); margin-bottom: 8px; }
.nc-l small { font-weight: 500; color: var(--tinta-3); margin-left: 4px; }
.nc-paso .buscar { margin-bottom: 10px; }
.nc-sel { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; background: var(--papel); border-radius: 14px; box-shadow: var(--sh-1); }
.nc-sel b { flex: 1; font-weight: 600; }
.nc-tel { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--tinta-2); margin-top: 10px; }
.nc-tel small { font-weight: 400; }

.det-top { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.det-top h2 { font-size: 26px; }
.det-top p { font-size: 14px; color: var(--tinta-2); }
.det-cuando { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; padding: 12px 14px; border-radius: var(--r); background: var(--papel); box-shadow: var(--sh-1); font-size: 14px; }
.det-cuando > span:nth-child(2) { flex: 1; }
.det-cuando b::first-letter { text-transform: uppercase; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 16px 0 0; }
.stats div { background: var(--papel); border-radius: 14px; padding: 10px 8px; box-shadow: var(--sh-1); display: flex; flex-direction: column-reverse; }
.stats dt { font-size: 11px; color: var(--tinta-3); font-weight: 600; }
.stats dd { margin: 0; font: 400 17px/1.2 var(--f-d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aviso-dor { display: flex; gap: 8px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; border-radius: var(--r); background: var(--coral-s); color: var(--coral-t); font-size: 14px; }
.prox { display: flex; gap: 8px; align-items: center; margin-top: 14px; font-size: 14px; color: var(--tinta-2); }
.det .form { margin-top: 16px; }
.hist { display: flex; flex-direction: column; }
.hist li { display: grid; grid-template-columns: 64px 1fr auto; gap: 8px; padding: 10px 2px; border-bottom: 1px solid var(--linea); font-size: 14px; }
.hist span { color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.hist b { font-weight: 600; }
.hist em { font-style: normal; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.hist li.cancelada b, .hist li.falto b { color: var(--tinta-3); text-decoration: line-through; }

.liberado { text-align: center; padding: 6px 0 14px; }
.lib-ic { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 10px; background: var(--blush); color: var(--ciruela); animation: pop 360ms var(--ease) both; }
.liberado h2 { font-size: 24px; }
.liberado .lead { margin-top: 6px; font-size: 15px; }
@keyframes pop { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }

.historia .h-prev { width: 62%; max-width: 250px; margin: 2px auto 14px; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; box-shadow: var(--sh-2); background: var(--blush); }
.h-prev canvas, .h-prev img { width: 100%; height: 100%; display: block; -webkit-touch-callout: default; }
.h-dis { display: flex; gap: 8px; justify-content: center; }
.dis { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--tinta-2); }
.dis-m { position: relative; width: 50px; height: 64px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--linea-2); transition: box-shadow 160ms var(--ease), transform 120ms var(--ease); overflow: hidden; }
.dis:active .dis-m { transform: scale(.94); }
.dis.on .dis-m { box-shadow: 0 0 0 2px var(--crema), 0 0 0 4px var(--ciruela); }
.dis.on { color: var(--ciruela); }
.dis-rosa { background: linear-gradient(180deg, #E8CFC6 0 34%, var(--crema) 34%); }
.dis-ciruela { background: linear-gradient(180deg, #8A5A70 0 38%, var(--noche) 38%); }
.dis-marmol { background: linear-gradient(160deg, #6E5560, #3A2A34); }
.dis-dorado { background: var(--blush); box-shadow: inset 0 0 0 3px var(--dorado); }
.dis-floral { background: linear-gradient(180deg, #DCE5D5 0 36%, var(--crema) 36%); }
.dis.bloq .dis-m { filter: saturate(.8); }
.dis-m > i { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(42, 30, 44, .58); color: #F3D9A0; }
.historia .nota { margin-top: 12px; }

/* ---------- toast ---------- */
.toast { position: fixed; z-index: 60; left: 50%; bottom: calc(var(--tab-h) + var(--sa-b) + 80px); transform: translate(-50%, 16px); width: calc(100% - 32px); max-width: 440px; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; border-radius: 16px; background: var(--tinta); color: #FFF6F0; font-size: 14px; font-weight: 500; box-shadow: var(--sh-2); opacity: 0; pointer-events: none; transition: opacity 200ms var(--ease), transform 260ms var(--ease); }
.toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast > span { flex: 1; }
.toast-a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; background: rgba(255, 246, 240, .14); color: #FFF6F0; font-weight: 700; font-size: 13px; white-space: nowrap; }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { filter: brightness(1.06); }
  .cl-it:hover, .prod:hover, .tarjeta:hover { background-color: #FFFCFA; }
  .tab:hover { color: var(--ciruela); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
  .vista { transform: none; }
}

.prod-img .gc { width: 84px; padding: 7px 8px; border-radius: 7px; gap: 0; transform: translate(-50%, -50%) rotate(-6deg); }
.prod-img .gc small { font-size: 5px; letter-spacing: .14em; }
.prod-img .gc b { font-size: 12px; margin: 2px 0; }
.prod-img .gc span { font-size: 5.5px; }

/* ---------------- BONOS ---------------- */
.vista[data-ruta^="bono-"]:not([data-ruta="bono-primeras"]) { padding-top: 0; }
.b-k { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dorado-t); display: flex; align-items: center; gap: 6px; }
.b-k .ic { width: 14px; height: 14px; }
.b-hero { height: 270px; }
.b-hero .b-k { color: var(--dorado); margin-bottom: 4px; }
.b-hero .plan-hero-t h1 { font-size: 36px; }
.b-pie { text-align: center; margin-top: 18px; font-size: 13px; color: var(--tinta-3); }
.b-nota { margin-top: 10px; }
.b-hmsg .msg { margin: 14px 0 0; }
.b-ojo { margin-top: 14px; padding: 12px 14px; border-radius: var(--r); background: var(--coral-s); color: var(--coral-t); font-size: 13.5px; line-height: 1.45; }

/* hub */
.b-dest { display: flex; gap: 14px; padding: 12px; border-radius: var(--r-xl); background: var(--noche); color: #FFF6F0; box-shadow: var(--sh-2); transition: transform 140ms var(--ease); }
.b-dest:active { transform: scale(.985); }
.b-dest img { width: 108px; aspect-ratio: 4 / 5; border-radius: 14px; object-fit: cover; flex: none; }
.b-dest > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 4px 2px; }
.b-dest .b-k { color: var(--dorado); }
.b-dest h2 { font-size: 22px; color: #FFF6F0; }
.b-dest h2 em { color: var(--rosa); }
.b-dest p { font-size: 13px; color: rgba(255, 246, 240, .78); }
.b-dest .btn { align-self: flex-start; margin-top: auto; background: var(--dorado); color: var(--tinta); box-shadow: none; }
.b-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.b-card { display: block; position: relative; border-radius: var(--r); overflow: hidden; background: var(--papel); box-shadow: var(--sh-1); transition: transform 140ms var(--ease); }
.b-card:active { transform: scale(.97); }
.b-card img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.b-est { display: block; padding: 8px 10px; font-size: 12.5px; font-weight: 600; color: var(--ciruela); border-top: 1px solid var(--linea); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-mini .b-pila { position: relative; width: 74px; height: 64px; flex: none; }
.b-mini .b-pila img { position: absolute; top: 0; width: 46px; height: 58px; border-radius: 8px; object-fit: cover; box-shadow: 0 2px 8px rgba(58, 20, 48, .18); border: 2px solid var(--papel); }
.b-mini .b-pila img:nth-child(1) { left: 0; transform: rotate(-7deg); }
.b-mini .b-pila img:nth-child(2) { left: 14px; top: 3px; z-index: 1; }
.b-mini .b-pila img:nth-child(3) { left: 28px; transform: rotate(7deg); z-index: 2; }

/* plan de 7 dias */
.tarjeta.p7 { margin-top: 16px; background: var(--papel); box-shadow: 0 0 0 1.5px var(--dorado), var(--sh-1); align-items: center; }
.tarjeta.p7 img { width: 58px; height: 72px; border-radius: 10px; }
.tarjeta.p7 h3 { margin-top: 2px; }
.tarjeta.p7 p { margin-top: 4px; }
.d7-barra { height: 8px; border-radius: 99px; background: var(--blush); overflow: hidden; }
.d7-barra i { display: block; height: 100%; min-width: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--dorado), var(--ciruela)); transition: width 400ms var(--ease); }
.d7-barra.chica { height: 6px; margin-top: 8px; }
.b-dest .d7-barra { background: rgba(255, 246, 240, .16); }
.d7-prog { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.d7-prog .d7-barra { flex: 1; }
.d7-prog span { font-size: 13px; font-weight: 600; color: var(--tinta-2); white-space: nowrap; }
.d7-tira { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 14px; }
.d7-d { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 0; border-radius: 12px; }
.d7-d span { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 400 17px/1 var(--f-d); background: var(--papel); box-shadow: inset 0 0 0 1.5px var(--linea-2); color: var(--ciruela); transition: transform 140ms var(--ease); }
.d7-d small { font-size: 10.5px; font-weight: 600; color: var(--tinta-3); }
.d7-d:active span { transform: scale(.92); }
.d7-d.hecho span { background: var(--salvia-t); color: #fff; box-shadow: none; }
.d7-d.bloq span { background: var(--blush-2); color: var(--tinta-3); box-shadow: none; }
.d7-d.on span { box-shadow: 0 0 0 2px var(--crema), 0 0 0 4px var(--ciruela); }
.d7-d.on small { color: var(--ciruela); }
.d7-card { margin-top: 16px; border-radius: var(--r-xl); background: var(--papel); box-shadow: var(--sh-1); overflow: hidden; scroll-margin-top: 12px; }
.d7-img { width: 100%; height: 150px; object-fit: cover; display: block; }
.d7-card.bloq .d7-img { filter: grayscale(.5) brightness(1.05); opacity: .6; }
.d7-c { padding: 16px 16px 18px; }
.d7-c h2 { margin: 4px 0 6px; font-size: 26px; }
.d7-c > .nota { margin-bottom: 4px; }
.d7-c > .btn { margin-top: 14px; }
.tareas { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.tarea .ck { box-shadow: inset 0 0 0 1px var(--linea); text-align: left; }
.bloque .tarea .ck { box-shadow: var(--sh-1); }
.tarea .ck.on b { text-decoration: line-through; text-decoration-color: rgba(63, 107, 83, .45); }
.tarea-a { padding: 6px 0 2px 52px; }
.tarea-a .btn { min-height: 38px; }
.d7-cuenta { margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--tinta-3); display: flex; align-items: center; gap: 6px; }
.d7-cuenta.ok { color: var(--salvia-t); }
.d7-fin { margin-top: 16px; padding: 20px 18px; border-radius: var(--r-xl); background: var(--noche); color: #FFF6F0; }
.d7-fin h2 { color: #FFF6F0; }
.d7-fin h2 em { color: var(--dorado); }
.d7-fin p { font-size: 14px; color: rgba(255, 246, 240, .82); margin: 8px 0 14px; }
.b-inv-k { margin-top: 16px; }
.b-inv { margin: 14px 0 6px; }

/* politica */
.b-form fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.b-form legend { font-size: 13px; font-weight: 600; color: var(--tinta-2); padding: 0; margin-bottom: 6px; }
.b-form label small { line-height: 1.4; }
.b-form .chip-sel { min-height: 40px; }
.b-pol { border-radius: 4px 18px 18px 18px; }
.b-pol-sub { display: block; font-size: 12px; color: var(--tinta-3); margin: -2px 0 6px; }
.b-pre { white-space: pre-line; }
.b-pol-pie { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.b-cont { font-size: 12px; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.b-cont.pasa { color: var(--coral-t); font-weight: 700; }
.msg mark { background: rgba(200, 161, 90, .28); color: var(--tinta); border-radius: 4px; padding: 0 2px; }

/* calculadora */
.b-calc { margin-top: 18px; }
.b-calc .d-n b { font-size: 50px; }
.b-calc-r { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 6px; padding-top: 12px; border-top: 1px solid rgba(255, 246, 240, .18); position: relative; z-index: 1; }
.b-calc-r div { display: flex; flex-direction: column; gap: 2px; }
.b-calc-r dt { font-size: 12.5px; color: rgba(255, 246, 240, .72); }
.b-calc-r dd { margin: 0; font: 400 25px/1.1 var(--f-d); color: #FFF6F0; font-variant-numeric: tabular-nums; }
.b-antes { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; color: var(--tinta-2); }
.b-rangos { display: flex; flex-direction: column; gap: 10px; }
.b-rango { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: var(--r); background: var(--papel); box-shadow: var(--sh-1); }
.b-rango-t { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; font-weight: 600; color: var(--tinta); }
.b-rango-t b { font: 400 22px/1 var(--f-d); color: var(--ciruela); font-variant-numeric: tabular-nums; white-space: nowrap; }
.b-rango small { font-size: 12px; color: var(--tinta-3); line-height: 1.4; }
.b-rango input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; touch-action: pan-y; }
.b-rango input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: var(--blush); }
.b-rango input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: var(--ciruela); box-shadow: 0 0 0 4px var(--papel), 0 2px 8px rgba(58, 20, 48, .3); }
.b-rango input[type=range]::-moz-range-track { height: 6px; border-radius: 99px; background: var(--blush); }
.b-rango input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 50%; background: var(--ciruela); }
.b-meta { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 14px; border-radius: var(--r-l); background: var(--papel); box-shadow: var(--sh-1); }
.b-meta p { display: flex; flex-direction: column; align-items: center; min-width: 130px; }
.b-meta p b { font: 400 46px/1 var(--f-d); color: var(--ciruela); }
.b-meta p span { font-size: 13px; color: var(--tinta-2); }
.b-mm { width: 48px; height: 48px; font-size: 26px; font-weight: 500; color: var(--ciruela); background: var(--blush); }
.b-meta-r { text-align: center; margin-top: 12px; font-size: 17px; color: var(--tinta-2); }
.b-meta-r b { color: var(--tinta); font-size: 20px; }
.pasos span .link { display: inline-flex; min-height: 0; margin-top: 2px; font-size: 13px; }

/* tablero del domingo */
.b-sem { margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--ciruela); }
.b-sem + .nota { margin-top: 4px; }
.b-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.b-num { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: var(--r); background: var(--papel); box-shadow: var(--sh-1); }
.b-num b { font: 400 34px/1 var(--f-d); color: var(--ciruela); font-variant-numeric: tabular-nums; }
.b-num span { font-size: 13px; line-height: 1.3; color: var(--tinta); font-weight: 600; }
.b-num small { font-size: 11.5px; color: var(--tinta-3); line-height: 1.3; }
.b-num.ancho { grid-column: span 2; background: var(--noche); }
.b-num.ancho b { color: var(--dorado); }
.b-num.ancho span { color: #FFF6F0; }
.b-num.ancho small { color: rgba(255, 246, 240, .62); }

/* guia primeras clientas */
.gp { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; scrollbar-width: none; overscroll-behavior-x: contain; outline: none; }
.gp::-webkit-scrollbar { display: none; }
.gp-s { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; padding: 0 16px; }
.gp-img { border-radius: var(--r-xl); overflow: hidden; height: 210px; box-shadow: var(--sh-1); }
.gp-img img { width: 100%; height: 100%; object-fit: cover; }
.gp-t { padding: 16px 2px 0; }
.gp-t h2 { font-size: 27px; margin: 6px 0 8px; }
.gp-p { font-size: 15.5px; line-height: 1.55; color: var(--tinta-2); text-wrap: pretty; }
.gp-a { margin-top: 12px; }
.gp-no { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.gp-no li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; }
.gp-no .ic { color: var(--coral-t); flex: none; margin-top: 2px; }
.gp-pr { margin-top: 16px; padding: 14px; border-radius: var(--r-l); background: var(--papel); box-shadow: var(--sh-1); }
.gp-pr p { display: flex; justify-content: space-between; align-items: baseline; }
.gp-pr p span { font-size: 13px; font-weight: 600; color: var(--ciruela); }
.gp-pr-c { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 12px 0 8px; }
.gp-c { aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font: 400 17px/1 var(--f-d); color: var(--ciruela); box-shadow: inset 0 0 0 1.5px var(--linea-2); transition: background 160ms var(--ease), transform 120ms var(--ease); }
.gp-c:active { transform: scale(.92); }
.gp-c.on { background: var(--salvia-t); color: #fff; box-shadow: none; }
.gp-pr small { font-size: 12px; color: var(--tinta-3); }
.gp-s .candado-mini { margin-top: 14px; }
.gp-nav { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.gp-nav .btn-ic { background: var(--blush); color: var(--ciruela); }
.gp-nav .btn-ic:disabled { opacity: .35; }
.gp-dots { flex: 1; display: flex; justify-content: center; gap: 6px; }
.gp-dots i { width: 7px; height: 7px; border-radius: 99px; background: var(--linea-2); transition: width 220ms var(--ease), background 220ms; }
.gp-dots i.on { width: 20px; background: var(--ciruela); }
@media (prefers-reduced-motion: reduce) { .d7-barra i, .gp-dots i { transition: none; } }
.b-hero::after { background: linear-gradient(180deg, rgba(46, 14, 38, .18) 0%, rgba(46, 14, 38, .5) 38%, rgba(46, 14, 38, .95) 100%); }
.b-hero .b-k { text-shadow: 0 1px 8px rgba(30, 8, 24, .5); }
.b-pol-pie .btn { width: auto; flex: none; margin-left: auto; min-height: 40px; padding: 0 16px; }
.gp-nav { position: sticky; z-index: 5; bottom: calc(var(--tab-h) + var(--sa-b)); margin: 10px -16px 0; padding: 10px 16px; background: linear-gradient(180deg, rgba(255, 249, 244, 0), var(--crema) 26%); }
.gp-s { align-self: flex-start; }
.gp-c { width: 46px; height: 46px; aspect-ratio: auto; justify-self: center; }
.gp-sig { flex: none; padding: 0 18px; white-space: nowrap; } .gp-dots { min-width: 0; }
.b-dest img { align-self: center; height: auto; }

/* instalar en la pantalla de inicio */
.tarjeta.inst { position: relative; align-items: center; padding-right: 40px; }
.tarjeta.inst h3 { margin: 0 0 2px; font-size: 15px; }
.tarjeta.inst p { margin: 0; font-size: 13px; color: var(--tinta-2); line-height: 1.35; }
.inst-ic { flex: 0 0 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--blush); color: var(--ciruela); }
.btn.chico { flex: 0 0 auto; padding: 9px 14px; min-height: 40px; font-size: 14px; }
.inst-x { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; }
ol.pasos { margin: 10px 0 18px; padding: 0; list-style: none; }
ol.pasos li { align-items: center; }
ol.pasos li p { margin: 0; font-size: 15px; line-height: 1.45; }
ol.pasos svg { vertical-align: -3px; }

/* formulario del upsell 2 (pedido-web.js) */
.pw .form, .pw fieldset { margin-bottom: 14px; }
.pw fieldset legend small { font-weight: 400; color: var(--tinta-3); }
.pw-caja { margin: 0 0 14px; padding: 14px 16px; border-radius: var(--r); background: var(--papel); box-shadow: var(--sh-1); }
.pw-caja p { margin: 4px 0; font-size: 15px; }
.pw-caja-t { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.pw-caja-t small { font-weight: 400; color: var(--tinta-3); font-size: 13px; }
.pw-serv, .pw-res { display: flex; justify-content: space-between; gap: 12px; }
.pw-serv small { color: var(--tinta-3); font-size: 12px; margin-left: 4px; }
.pw-res span { color: var(--tinta-2); }
.pw-res b { text-align: right; font-weight: 600; }
.pw-falta { color: var(--coral-t); font-style: normal; font-weight: 600; }
.pw-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 6px; }
.pw-foto { position: relative; margin: 0; border-radius: 14px; overflow: hidden; background: var(--papel); box-shadow: var(--sh-1); }
.pw-foto img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.pw-foto.ppal { box-shadow: 0 0 0 3px var(--dorado); }
.pw-star, .pw-del { position: absolute; top: 6px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(42, 30, 44, .55); color: #fff; font-size: 18px; line-height: 1; }
.pw-star { left: 6px; } .pw-del { right: 6px; }
.pw-foto.ppal .pw-star { background: var(--dorado); color: var(--tinta); }
.pw-txt { min-height: 40px !important; border-radius: 0 !important; box-shadow: none !important; font-size: 13px; padding: 8px 10px !important; }
.pw-subir { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 160px; border-radius: 14px; border: 2px dashed var(--linea-2); color: var(--ciruela); font-weight: 600; font-size: 14px; cursor: pointer; }
.pw-logo { display: flex; align-items: center; gap: 12px; }
.pw-logo img { width: 64px; height: 64px; object-fit: contain; border-radius: 10px; background: var(--crema); }
.pw-logo-sub { display: inline-flex; min-height: 44px; align-items: center; cursor: pointer; }
.pw-dis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pw-dis-op { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 6px 6px 10px; border-radius: 14px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--linea-2); text-align: left; }
.pw-dis-op img { width: 100%; aspect-ratio: 300 / 456; object-fit: cover; border-radius: 9px; }
.pw-dis-op b { font-size: 14px; padding: 0 2px; }
.pw-dis-op small { font-size: 11.5px; line-height: 1.3; color: var(--tinta-3); padding: 0 2px; }
.pw-dis-op.on { box-shadow: 0 0 0 3px var(--ciruela); }
.pw-col { flex-direction: row !important; align-items: center !important; gap: 8px; }
.pw-col i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.pw-linea { list-style: none; margin: 6px 0 18px; padding: 0; display: grid; gap: 14px; }
.pw-linea li { display: flex; align-items: center; gap: 12px; color: var(--tinta-3); font-weight: 600; }
.pw-linea li i { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--linea); color: var(--tinta-2); font-style: normal; font-size: 14px; }
.pw-linea li.on { color: var(--tinta); }
.pw-linea li.on i { background: var(--ciruela); color: #FFF6F0; }
.pw-lista { display: grid; gap: 10px; }
.pw-cambiar { margin-top: 18px; }

/* descargas de los bumps */
.descargas { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 8px; }
.descargas a, .descargas li > div { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r); background: var(--papel); box-shadow: var(--sh-1); color: var(--tinta); text-decoration: none; }
.descargas b { display: block; font-size: 15px; }
.descargas small { display: block; font-size: 12.5px; color: var(--tinta-3); }
.dl-ic { flex: 0 0 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--blush); color: var(--ciruela); }
.dl-otros summary { cursor: pointer; font-weight: 600; color: var(--ciruela); padding: 8px 0; min-height: 44px; display: flex; align-items: center; }