/* Portal de clientes — misma dirección «Editorial» de la galería (galeria/site/g.css): fondo #0B0A09, marfil, beige,
   naranja solo como acento puntual; títulos Cormorant Garamond 300 (cursiva en el acento), texto DM Sans, etiquetas DM Mono.
   Pensado primero para 375 px. */
:root{--bg:#0B0A09;--ink:#EFE8DF;--beige:#C1AA96;--dim:#A39689;--naranja:#F59847;--line:rgba(193,170,150,.24);--panel:#171513;--err:#E5886F;
  --f-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;--f-sans:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;--f-mono:'DM Mono',ui-monospace,'Courier New',monospace;
  --mx:20px}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:400 15px/1.6 var(--f-sans);-webkit-font-smoothing:antialiased;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.dim{color:var(--dim)}
.etq{font:400 11.5px/1.5 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--beige)}
h1{font:300 clamp(40px,11vw,64px)/1.02 var(--f-serif);color:var(--ink);overflow-wrap:anywhere}
h1 em{font-style:italic;font-weight:300;color:var(--naranja)}

.top{display:flex;align-items:center;justify-content:space-between;padding:calc(14px + env(safe-area-inset-top)) calc(var(--mx) + env(safe-area-inset-right)) 14px calc(var(--mx) + env(safe-area-inset-left));border-bottom:1px solid var(--line)}
.logo{height:32px;width:auto}
main{flex:1;width:100%;max-width:680px;margin:0 auto;padding:36px calc(var(--mx) + env(safe-area-inset-right)) 40px calc(var(--mx) + env(safe-area-inset-left))}
.pie{padding:20px var(--mx) calc(24px + env(safe-area-inset-bottom));text-align:center;border-top:1px solid var(--line)}

/* Botones: primario marfil con texto negro, secundario con borde, texto. Mínimo 44 px táctiles. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 22px;font:500 14px/1 var(--f-sans);border-radius:2px;white-space:nowrap;transition:background-color .2s,opacity .2s,border-color .2s}
.btn.pri{background:var(--ink);color:#0B0A09}.btn.pri:hover{background:#fff}
.btn.sec{border:1px solid rgba(239,232,223,.5)}.btn.sec:hover{border-color:var(--ink)}
.btn.txt{padding:0 4px;color:var(--ink)}.btn.txt:hover{text-decoration:underline;text-underline-offset:5px}
.btn[disabled]{opacity:.5;pointer-events:none}
:focus-visible{outline:2px solid var(--naranja);outline-offset:3px}

/* Pestañas: subrayado naranja en la activa, como la barra de la galería */
.tabs{display:flex;gap:26px;padding:0 calc(var(--mx) + env(safe-area-inset-right)) 0 calc(var(--mx) + env(safe-area-inset-left));border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{position:relative;flex:none;min-height:48px;padding:0;font:400 14px/1 var(--f-sans);color:var(--dim);white-space:nowrap}
.tab[aria-selected="true"]{color:var(--ink)}
.tab[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--naranja)}

/* Entrada */
.entrada{padding-top:clamp(12px,6vh,56px)}
.entrada h1{margin:14px 0 18px}
.intro{max-width:34ch;margin-bottom:34px}
form{display:flex;flex-direction:column;gap:10px}
input{width:100%;min-height:52px;padding:0 16px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:2px;font:400 18px/1 var(--f-mono);letter-spacing:.06em;-webkit-appearance:none;appearance:none}
input:focus{outline:none;border-color:var(--beige)}
.error{color:var(--err);font-size:14px}
form .btn{margin-top:8px;width:100%}
.centro{min-height:50vh;display:flex;align-items:center;justify-content:center}

/* Mis trabajos */
#vista-trabajos h1{margin:12px 0 28px}
.lista{display:flex;flex-direction:column;gap:14px}
.vacio{padding:26px 0;color:var(--dim)}
.tarjeta{background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:20px 18px 18px}
.meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin-bottom:10px}
.tarjeta h2{font:400 clamp(24px,6.6vw,30px)/1.12 var(--f-serif);overflow-wrap:anywhere;margin-bottom:18px}

/* Línea de progreso: un tramo por etapa; los alcanzados en beige, el actual con punto naranja */
.progreso{list-style:none;display:flex;gap:4px;margin-bottom:10px}
.progreso li{flex:1;height:2px;background:var(--line);position:relative}
.progreso li.hecho{background:var(--beige)}
.progreso li.actual{background:var(--beige)}
.progreso li.actual::after{content:"";position:absolute;right:-1px;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--naranja)}
.etapa{font:500 14px/1.4 var(--f-sans);color:var(--ink)}
.etapa small{display:block;color:var(--dim);font:400 12.5px/1.4 var(--f-sans);margin-top:2px}
.entregas{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.entregas .btn{width:100%}

/* Mi cuenta */
#vista-cuenta h1{margin:12px 0 14px}
#vista-cuenta .intro{margin-bottom:26px}
.ayuda{display:flex;flex-direction:column;gap:10px;margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
.ayuda .btn{width:100%;white-space:normal;text-align:center;line-height:1.2;padding:12px 18px}
.pendiente{margin:14px 0 26px}
.pendiente strong{display:block;font:300 clamp(46px,13vw,72px)/1.05 var(--f-serif);margin:4px 0 2px;color:var(--ink)}
.pendiente strong.debe{color:var(--naranja)}
.filas{display:grid;grid-template-columns:1fr auto;gap:6px 14px;margin:2px 0 4px;font-size:14.5px}
.filas dt{color:var(--dim)}.filas dd{text-align:right;font-variant-numeric:tabular-nums}
.filas .resto{font-weight:500}.filas .resto.debe{color:var(--naranja)}
.pagos{list-style:none;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.pagos .etq{display:block;margin-bottom:8px}
.pagos li{display:flex;justify-content:space-between;gap:14px;padding:5px 0;font-size:14px;color:var(--dim);font-variant-numeric:tabular-nums}
.pagos li span:last-child{color:var(--ink)}

/* Mis beneficios */
.sub{font:400 24px/1.15 var(--f-serif);margin:34px 0 12px}
.filas-saldo{margin-bottom:4px}
.pagos-solos{border-top:0;margin-top:0;padding-top:0}
textarea{width:100%;padding:12px 16px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:2px;font:400 16px/1.5 var(--f-sans);resize:vertical;-webkit-appearance:none;appearance:none}
textarea:focus{outline:none;border-color:var(--beige)}
#form-canje label{margin-top:6px}
.exito{color:var(--beige);font-size:14px}
.canjes{margin-top:18px}
.canje{border:1px solid var(--line);border-radius:2px;padding:14px 16px;background:var(--panel)}
.canje b{font-weight:500}.canje small{display:block;color:var(--dim);font-size:13px;margin-top:3px}
.canje .estado{display:inline-block;margin-top:8px;font:400 11.5px/1.4 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--beige)}
.canje .estado.espera{color:var(--naranja)}
#recomendar{margin-top:14px}

@media (min-width:640px){:root{--mx:32px}.tarjeta{padding:24px 24px 22px}.entregas{flex-direction:row;flex-wrap:wrap}.ayuda{flex-direction:row}.ayuda .btn{width:auto}.entregas .btn{width:auto}form .btn{width:auto;align-self:flex-start}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}