/* ═══════════════════════════════════════════════════════════════════════
   NH MAISON · sitio-web/cuenta.css  (Fase 79)
   Estilos compartidos de "Mi cuenta" (mi-espacio.html) y del pago
   (pagar.html): mismo sistema de cristal y arcilla que el resto del sitio.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --porcelain:#FBF7F1; --cream:#F5EDE1; --sand:#EADDCB;
  --gold:#C0A16C; --gold-soft:#DCC49A; --gold-deep:#826841;
  --espresso:#3B2E25; --ink:#241B15; --taupe:#6E5F4F; --mist:#746B5F; --alert:#A4564B; --ok:#4E7A55;
  --glass-bg:linear-gradient(145deg,rgba(255,253,250,.72),rgba(255,251,244,.38));
  --glass-border:rgba(255,255,255,.72);
  --glass-blur:saturate(165%) blur(22px);
  --glass-shadow:0 1px 0 rgba(255,255,255,.85) inset,0 18px 44px -22px rgba(59,46,37,.34),0 4px 14px -8px rgba(59,46,37,.14);
  --clay-shadow:6px 6px 14px rgba(140,113,79,.24),-6px -6px 14px rgba(255,255,255,.92),
     2px 2px 4px rgba(255,255,255,.55) inset,-3px -3px 8px rgba(140,113,79,.12) inset;
  --clay-shadow-hover:9px 9px 22px rgba(140,113,79,.30),-8px -8px 20px rgba(255,255,255,.98);
  --font-display:"Cormorant Garamond",'Times New Roman',serif;
  --font-ui:"Jost","Helvetica Neue",Arial,sans-serif;
  --r-md:18px; --r-lg:26px; --r-xl:34px; --r-pill:999px;
  --gutter:clamp(16px,4vw,56px); --maxw:1200px;
  --ease:cubic-bezier(.22,.9,.24,1); --ease-soft:cubic-bezier(.4,.14,.16,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:18px;-webkit-text-size-adjust:100%}
body{font-family:var(--font-ui);font-weight:300;color:var(--espresso);line-height:1.6;min-height:100vh;
  background:
    radial-gradient(1200px 700px at 78% -8%,rgba(220,196,154,.34),transparent 62%),
    radial-gradient(900px 620px at 6% 12%,rgba(234,221,203,.5),transparent 58%),
    linear-gradient(168deg,var(--porcelain),var(--cream) 55%,var(--sand));
  background-attachment:fixed}
img{max-width:100%}
.shell{width:min(100% - var(--gutter)*2,var(--maxw));margin-inline:auto}
.display{font-family:var(--font-display);font-weight:300;line-height:1.1}
.eyebrow{font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-deep)}
.muted{color:var(--mist)}
:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;border-radius:6px}
a{color:inherit}
[hidden]{display:none!important}

/* ── barra superior ── */
.top{position:sticky;top:0;z-index:30;padding:.7rem 0;
  background:linear-gradient(180deg,rgba(251,247,241,.95),rgba(251,247,241,.7));
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border-bottom:1px solid rgba(192,161,108,.18)}
.top .bar{display:flex;align-items:center;gap:.9rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;min-width:0}
.brand img{width:40px;height:40px;object-fit:contain;flex:none}
.brand em{font-family:var(--font-display);font-style:normal;font-size:.98rem;letter-spacing:.22em;color:var(--ink);white-space:nowrap}
.brand small{display:block;font-size:.5rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mist)}
.top .sp{flex:1}
.lnk{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe);text-decoration:none;
  background:none;border:0;font-family:inherit;cursor:pointer;white-space:nowrap;padding:.3rem 0}
.lnk:hover{color:var(--gold-deep)}
.carrito-lnk{position:relative;display:inline-flex;align-items:center;gap:.35rem}
.carrito-lnk b{display:inline-grid;place-items:center;min-width:1.35rem;height:1.35rem;border-radius:99px;
  background:linear-gradient(145deg,#D8BE90,#B2955F);color:#2E241B;font-size:.6rem;font-weight:500;letter-spacing:0}
@media (max-width:560px){ .top .lnk--opt{display:none} .brand em{font-size:.84rem;letter-spacing:.16em} }

main{padding:clamp(20px,4vw,48px) 0 clamp(48px,8vw,100px)}

/* ── tarjetas y botones ── */
.card{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);border-radius:var(--r-xl);box-shadow:var(--glass-shadow);
  padding:clamp(18px,3vw,34px)}
.card + .card{margin-top:1rem}
.card h2{font-size:clamp(1.3rem,3vw,1.8rem)}
.card h3{font-family:var(--font-display);font-weight:400;font-size:1.25rem;color:var(--ink)}
@keyframes nhFadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.fade-in{animation:nhFadeUp .7s var(--ease-soft) both}
@media (prefers-reduced-motion:reduce){.fade-in{animation:none}}

.clay{position:relative;font:inherit;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--espresso);cursor:pointer;padding:.85rem 1.5rem;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.75);
  background:linear-gradient(145deg,rgba(255,253,250,.92),rgba(248,240,229,.7));box-shadow:var(--clay-shadow);
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;text-align:center;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.clay:hover{transform:translateY(-2px);box-shadow:var(--clay-shadow-hover)}
.clay[disabled],.clay.is-off{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.clay--gold{background:linear-gradient(145deg,#D8BE90,#B2955F);color:#2E241B;border-color:rgba(255,255,255,.5)}
.clay--ghost{background:transparent;box-shadow:none;border-color:rgba(140,113,79,.34)}
.clay--sm{padding:.6rem 1rem;font-size:.56rem}
.clay--block{width:100%}
.clay--danger{color:var(--alert);border-color:rgba(164,86,75,.4)}
.cta-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem}
@media (max-width:560px){ .cta-row > .clay{flex:1 1 100%} }

/* ── formularios ── */
.field{margin-top:.85rem}
.field:first-child{margin-top:0}
.field label{display:block;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe);margin-bottom:.32rem}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:.9rem;color:var(--ink);padding:.78rem .95rem;border-radius:var(--r-md);
  border:1px solid rgba(255,255,255,.8);background:linear-gradient(145deg,rgba(252,247,240,.92),rgba(244,235,222,.74));
  box-shadow:inset 3px 3px 7px rgba(140,113,79,.12),inset -3px -3px 7px rgba(255,255,255,.9)}
.field input[readonly]{opacity:.7}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 .9rem}
.grid3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:0 .9rem}
.grid2 > .field,.grid3 > .field{margin-top:.85rem}
@media (max-width:620px){ .grid2,.grid3{grid-template-columns:1fr} }
.ayuda{font-size:.66rem;color:var(--mist);margin-top:.3rem}
.aviso{margin-top:.9rem;font-size:.76rem;color:var(--taupe);padding:.8rem 1rem;border-radius:var(--r-md);
  border:1px solid rgba(192,161,108,.3);background:rgba(255,255,255,.5)}
.aviso--mal{border-color:rgba(164,86,75,.45);color:var(--alert);background:rgba(164,86,75,.06)}
.aviso--ok{border-color:rgba(78,122,85,.4);color:var(--ok);background:rgba(78,122,85,.07)}
.tabs{display:flex;gap:.4rem;padding:.3rem;border-radius:99px;background:rgba(255,255,255,.5);border:1px solid rgba(192,161,108,.25);width:max-content;max-width:100%}
.tab{font:inherit;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;border:0;background:none;color:var(--taupe);
  padding:.55rem 1rem;border-radius:99px;cursor:pointer}
.tab.is-on{background:linear-gradient(145deg,#D8BE90,#B2955F);color:#2E241B}

/* ── piezas (carrito / pedido) ── */
.pieza{display:grid;grid-template-columns:64px 1fr auto;gap:.9rem;align-items:center;padding:.8rem 0;border-bottom:1px solid rgba(192,161,108,.2)}
.pieza:last-child{border-bottom:0}
.pieza .ph{width:64px;height:84px;border-radius:12px;overflow:hidden;background:#2E241B}
.pieza .ph img,.pieza .ph svg{width:100%;height:100%;object-fit:cover;display:block}
.pieza h4{font-family:var(--font-display);font-weight:400;font-size:1.05rem;color:var(--ink);line-height:1.2}
.pieza .det{font-size:.7rem;color:var(--mist)}
.pieza .modo{display:inline-block;margin-top:.3rem;font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;padding:.22rem .55rem;border-radius:99px}
.modo--total{background:rgba(78,122,85,.12);color:var(--ok)}
.modo--apartado{background:rgba(192,161,108,.2);color:var(--gold-deep)}
.modo--nope{background:rgba(164,86,75,.1);color:var(--alert)}
.pieza .der{text-align:right;font-size:.8rem;color:var(--ink);white-space:nowrap}
.qty{display:inline-flex;align-items:center;gap:.4rem;margin-top:.35rem}
.qty button{width:26px;height:26px;border-radius:99px;border:1px solid rgba(140,113,79,.3);background:rgba(255,255,255,.6);cursor:pointer;font:inherit}
.quitar{font:inherit;font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;border:0;background:none;color:var(--alert);cursor:pointer;margin-top:.35rem}

/* ── resumen ── */
.resumen .fila{display:flex;justify-content:space-between;gap:1rem;font-size:.82rem;padding:.35rem 0}
.resumen .fila b{font-weight:500;color:var(--ink)}
.resumen .fila--total{border-top:1px solid rgba(192,161,108,.35);margin-top:.4rem;padding-top:.8rem}
.resumen .fila--total span:last-child{font-family:var(--font-display);font-size:1.6rem;color:var(--gold-deep)}

/* ── opciones seleccionables (direcciones, tarjetas) ── */
.opcion{display:flex;gap:.8rem;align-items:flex-start;padding:.9rem 1rem;border-radius:var(--r-md);cursor:pointer;
  border:1px solid rgba(192,161,108,.3);background:rgba(255,255,255,.45);margin-top:.6rem}
.opcion.is-on{border-color:var(--gold);background:linear-gradient(145deg,rgba(243,231,211,.9),rgba(232,214,185,.6))}
.opcion input{margin-top:.25rem;accent-color:var(--gold-deep)}
.opcion .txt{font-size:.8rem;line-height:1.45}
.opcion .txt b{font-weight:500;color:var(--ink)}

/* ── Fase 88 · «Completa tu look» en la ficha de Mi cuenta ─────────── */
.look{margin-top:1rem;padding:.9rem .9rem 1rem;border-radius:var(--r-md);background:var(--glass-bg);
  border:1px solid rgba(192,161,108,.35);display:grid;gap:.55rem}
.look__intro{font-size:.74rem;color:var(--taupe)}
.look__lista{display:grid;gap:.4rem}
.look__item{display:flex;align-items:center;gap:.4rem}
.look__elige{flex:1;min-width:0;display:grid;grid-template-columns:auto 42px 1fr;align-items:center;column-gap:.55rem;row-gap:.1rem;cursor:pointer;
  padding:.4rem .55rem;border-radius:12px;background:rgba(255,255,255,.6);border:1px solid rgba(192,161,108,.28)}
.look__elige:has(input:checked){border-color:var(--gold-deep);background:rgba(255,251,244,.9)}
.look__elige input{width:17px;height:17px;accent-color:var(--gold-deep)}
.look__foto{width:42px;height:54px;border-radius:8px;overflow:hidden;background:var(--sand)}
.look__foto img,.look__foto svg{width:100%;height:100%;object-fit:cover;display:block}
.look__txt{display:grid;min-width:0;font-size:.78rem}
.look__txt b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.look__txt small{font-size:.64rem;color:var(--taupe)}
.look__precio{grid-column:3;font-family:var(--font-display);font-size:.98rem;line-height:1.1;color:var(--gold-deep);white-space:nowrap}
.look__elige .look__foto,.look__elige input{grid-row:1 / span 2}
.look__ver{font:inherit;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);background:none;border:0;
  padding:.35rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.look__total{font-size:.76rem}