/* ==========================================================================
   Petit Mimo · página del QR
   TOKENS: lo único que hay que tocar para cambiar colores, tipografía,
   espaciado o radios. Derivados del logo y de docs/tokens.css (ERP).

   Regla de contraste (no romper): el texto va en --color-ink,
   --color-ink-soft o --color-brown-deep sobre fondos claros, y en
   --color-on-dark sobre --color-brown-deep. El marrón del logo
   (--color-brown) es solo para detalles: con blanco da 3.6:1.
   ========================================================================== */
:root{
  color-scheme: only light;

  /* Marca */
  --color-brown:        #a67c6b; /* marrón del logo: solo detalles */
  --color-brown-deep:   #6f4c3f; /* botón principal, bloque Instagram, etiquetas (7.4:1 con blanco) */
  --color-brown-press:  #4a3a32; /* botón presionado */
  --color-ink:          #2b211c; /* texto principal (13.6:1 sobre crema) */
  --color-ink-soft:     #5c4a40; /* texto secundario (7.2:1 sobre crema) */
  --color-sage-deep:    #4f6153; /* confirmación "¡Alias copiado!" (6.5:1 con blanco) */

  /* Superficies */
  --color-bg:           #f6ede3; /* crema de la página */
  --color-surface:      #fffdfb; /* tarjetas */
  --color-fill:         #eadbce; /* crema de la marca: estados presionados */
  --color-line:         #dccbbb; /* bordes finos */
  --color-on-dark:      #fffdfb;
  --color-on-dark-soft: #eadbce; /* 5.6:1 sobre --color-brown-deep */

  /* Colores de marca de terceros: solo para sus logos, nunca para texto */
  --logo-mercadopago: #009ee3;
  --logo-modo:        #008859;
  --logo-whatsapp:    #25d366;

  /* Tipografía (la del logo: Nunito Sans) */
  --font: "Nunito Sans", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-alias:  clamp(1.5rem, 7.4vw, 2rem); /* 24–32 px */
  --fs-title:  1.5rem;    /* 24 */
  --fs-button: 1.125rem;  /* 18 */
  --fs-body:   1rem;      /* 16 */
  --fs-small:  0.875rem;  /* 14 */
  --fs-label:  0.8125rem; /* 13, en mayúsculas */
  --fw-regular: 400; --fw-medium: 600; --fw-bold: 800;

  /* Espaciado (base 4) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px;

  /* Radios */
  --radius-card: 24px;
  --radius-pill: 999px;

  /* Medidas */
  --tap: 48px;          /* alto mínimo de cualquier control (mínimo exigido: 44) */
  --tap-primary: 56px;  /* botones principales */
  --page-max: 440px;
  --focus: 3px solid var(--color-ink);
}

@font-face{
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/nunito-sans-latin.woff2") format("woff2");
}

/* --- Base ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--color-bg)}
body{
  margin:0; min-height:100vh; min-height:100dvh;
  background:var(--color-bg); color:var(--color-ink);
  font:var(--fw-regular) var(--fs-body)/1.45 var(--font);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,p{margin:0}
a{color:inherit}
svg{display:block;flex:none}
[hidden]{display:none!important}
:focus-visible{outline:var(--focus);outline-offset:3px}
.card--ig :focus-visible{outline-color:var(--color-on-dark)}
::selection{background:var(--color-fill);color:var(--color-ink)}

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.page{
  max-width:var(--page-max); margin:0 auto;
  padding:
    calc(var(--s4) + env(safe-area-inset-top))
    calc(var(--s4) + env(safe-area-inset-right))
    calc(var(--s6) + env(safe-area-inset-bottom))
    calc(var(--s4) + env(safe-area-inset-left));
  display:flex; flex-direction:column; gap:var(--s4);
}

/* --- Encabezado ---------------------------------------------------------- */
.brand{display:flex;justify-content:center;padding:var(--s1) 0}
.brand img{display:block;height:108px;width:auto}

/* --- Tarjetas gemelas: mismo ancho, colores invertidos = mismo peso ------- */
.card{border-radius:var(--radius-card);padding:var(--s5)}
.card--pay{background:var(--color-surface);border:1px solid var(--color-line)}
.card--ig{background:var(--color-brown-deep);color:var(--color-on-dark)}

.label{
  font:var(--fw-bold) var(--fs-label)/1.2 var(--font);
  letter-spacing:.08em;text-transform:uppercase;color:var(--color-brown-deep);
}
.card--ig .label{color:var(--color-on-dark-soft)}

/* --- Cuentas ------------------------------------------------------------- */
.account{padding-top:var(--s4)}
.account + .account{margin-top:var(--s5);border-top:1px solid var(--color-line);padding-top:var(--s5)}
.account-bank{font-size:var(--fs-small);font-weight:var(--fw-medium);color:var(--color-ink-soft)}
.alias{
  margin-top:2px;
  font:var(--fw-bold) var(--fs-alias)/1.15 var(--font);
  letter-spacing:-.005em;overflow-wrap:anywhere;
  -webkit-user-select:all;user-select:all;
}
.account-meta{margin-top:var(--s2);color:var(--color-ink-soft);font-size:var(--fs-small)}
.account-meta b{color:var(--color-ink);font-weight:var(--fw-medium)}
.account-number{font-variant-numeric:tabular-nums;white-space:nowrap}
.account-help{margin-top:var(--s2);color:var(--color-ink);font-size:var(--fs-small);font-weight:var(--fw-medium)}

/* --- Botones ------------------------------------------------------------- */
.btn{
  display:flex;align-items:center;justify-content:center;gap:var(--s2);
  width:100%;min-height:var(--tap);padding:0 var(--s5);
  border:0;border-radius:var(--radius-pill);cursor:pointer;
  text-decoration:none;text-align:center;
  font:var(--fw-bold) var(--fs-body)/1.1 var(--font);
  -webkit-tap-highlight-color:transparent;
  transition:background-color .15s ease, transform .1s ease;
}
.btn:active{transform:scale(.98)}

.btn--primary{min-height:var(--tap-primary);font-size:var(--fs-button);
  background:var(--color-brown-deep);color:var(--color-on-dark);margin-top:var(--s3)}
.btn--primary:active{background:var(--color-brown-press)}
.btn--primary.is-done{background:var(--color-sage-deep)}

.btn--light{min-height:var(--tap-primary);font-size:var(--fs-button);
  background:var(--color-surface);color:var(--color-ink);margin-top:var(--s4)}
.btn--light:active{background:var(--color-fill)}

.btn--outline{background:transparent;color:var(--color-ink);border:1.5px solid var(--color-brown-deep)}
.btn--outline:active{background:var(--color-fill)}

.btn-row{display:flex;flex-wrap:wrap;gap:var(--s2)}
.btn-row .btn{flex:1 1 auto;width:auto;padding:0 var(--s3);gap:6px;font-size:.9375rem;white-space:nowrap}
.btn-row--lg .btn{min-height:var(--tap-primary)}

.apps{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--color-line)}
.apps-hint{margin-bottom:var(--s2);color:var(--color-ink-soft);font-size:var(--fs-small)}

.logo-mp{color:var(--logo-mercadopago)}
.logo-modo{color:var(--logo-modo)}
.logo-wa{color:var(--logo-whatsapp)}

/* --- Instagram ----------------------------------------------------------- */
.ig-title{margin-top:var(--s3);font:var(--fw-bold) var(--fs-title)/1.15 var(--font)}
.ig-sub{margin-top:var(--s2);color:var(--color-on-dark-soft)}

/* --- Contacto ------------------------------------------------------------ */
.contact{list-style:none;margin:0;padding:0;
  background:var(--color-surface);border:1px solid var(--color-line);
  border-radius:var(--radius-card);overflow:hidden}
.contact li + li{border-top:1px solid var(--color-line)}
.contact-row{display:flex;gap:var(--s3);align-items:center;
  min-height:var(--tap-primary);padding:var(--s3) var(--s4);text-decoration:none}
a.contact-row:active{background:var(--color-fill)}
.contact-row svg{color:var(--color-brown-deep)}
.contact-row strong{display:block;font-weight:var(--fw-medium)}
.contact-row small{display:block;color:var(--color-ink-soft);font-size:var(--fs-small)}

/* --- Pie ----------------------------------------------------------------- */
.foot{text-align:center;color:var(--color-ink-soft);font-size:var(--fs-small);padding-top:var(--s1)}

/* --- Desktop: misma columna, con más aire -------------------------------- */
@media (min-width:600px){
  .page{padding-top:var(--s8);padding-bottom:var(--s8);gap:var(--s5)}
  .brand img{height:132px}
  .btn{transition:background-color .15s ease, transform .1s ease, box-shadow .15s ease}
  .btn--primary:hover{background:var(--color-brown-press)}
  .btn--primary.is-done:hover{background:var(--color-sage-deep)}
  .btn--light:hover,.btn--outline:hover,a.contact-row:hover{background:var(--color-fill)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .btn:active{transform:none}
}

@media print{
  .btn,.apps{display:none}
}