/* Arissa Divine — estilos del catálogo (tokens + layout) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700&family=Sacramento&display=swap');

:root {
  --teal-50:#ecf6f8; --teal-100:#cfe9ed; --teal-200:#9fd2da; --teal-300:#5fb3c0;
  --teal-400:#2295a8; --teal-500:#008098; --teal-600:#006d83; --teal-700:#005870;
  --teal-800:#00475a; --teal-900:#003644;
  --blush-100:#fbe7e6; --blush-300:#e6a9ad; --blush-400:#d98e9e; --blush-500:#c66f84;
  --cream-50:#fdfbf9; --cream-100:#fbf6f2; --cream-200:#f3ece5; --sand-300:#e4d8cd;
  --ink-900:#16282d; --ink-700:#34474c; --ink-500:#5d6c70; --ink-400:#8a979a;
  --ink-300:#b9c2c4; --ink-200:#dde3e4; --ink-100:#eef1f1; --white:#ffffff;
  --success:#2f9e6f; --danger:#c4503f; --whatsapp:#25d366; --whatsapp-dark:#128c7e;

  --color-primary:var(--teal-500); --color-primary-hover:var(--teal-600); --color-primary-press:var(--teal-700);
  --color-on-primary:var(--cream-100); --color-accent:var(--blush-400);
  --surface-page:var(--cream-100); --surface-card:var(--white);
  --text-strong:var(--ink-900); --text-body:var(--ink-700); --text-muted:var(--ink-500);
  --text-faint:var(--ink-400); --text-price:var(--teal-700);
  --border-subtle:var(--ink-200); --border-card:var(--sand-300); --focus-ring:var(--teal-400);

  --font-sans:'Poppins',system-ui,sans-serif;
  --font-display:'Cormorant Garamond',Georgia,serif;
  --font-script:'Sacramento',cursive;
  --text-2xs:.6875rem; --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-md:1.125rem;
  --text-lg:1.375rem; --text-xl:1.75rem; --text-2xl:2.25rem; --text-3xl:3rem;
  --weight-light:300; --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;
  --leading-tight:1.1; --leading-snug:1.25; --leading-normal:1.5; --leading-relaxed:1.7;
  --tracking-wide:.04em; --tracking-wider:.12em;

  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem;
  --space-6:2rem; --space-7:2.5rem; --space-8:3rem; --space-10:4rem; --space-12:5rem;
  --radius-xs:4px; --radius-sm:8px; --radius-md:14px; --radius-lg:20px; --radius-xl:28px; --radius-pill:999px;
  --shadow-xs:0 1px 2px rgba(0,64,80,.06); --shadow-sm:0 2px 8px rgba(0,64,80,.07);
  --shadow-md:0 8px 24px rgba(0,64,80,.10); --shadow-lg:0 18px 48px rgba(0,64,80,.14);
  --shadow-card:0 4px 18px rgba(0,72,90,.08); --shadow-card-hover:0 14px 36px rgba(0,72,90,.16);
  --container-max:1320px; --header-h:84px;
  --ease-out:cubic-bezier(.22,1,.36,1); /* @kind other */
  --ease-in-out:cubic-bezier(.65,0,.35,1); /* @kind other */
  --ease-soft:cubic-bezier(.4,0,.2,1); /* @kind other */
  --dur-fast:140ms; /* @kind other */
  --dur-base:240ms; /* @kind other */
  --dur-slow:420ms; /* @kind other */
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--surface-page); overflow-x:hidden; max-width:100%; }
body {
  font-family:var(--font-sans); font-weight:400; font-size:var(--text-base);
  line-height:var(--leading-normal); color:var(--text-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6 { margin:0; color:var(--text-strong); line-height:var(--leading-tight); }
a { color:var(--color-primary); text-decoration:none; }
.ad-eyebrow {
  font-family:var(--font-sans); font-size:var(--text-xs); font-weight:600;
  letter-spacing:var(--tracking-wider); text-transform:uppercase; color:var(--color-primary);
}
.ad-display { font-family:var(--font-display); font-weight:500; letter-spacing:-.02em; }
*:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }

/* Grid responsivo: 2 móvil / 4 tablet / 6 desktop */
.ad-grid { display:grid; gap:var(--space-4); grid-template-columns:repeat(2,1fr); }
@media (min-width:700px)  { .ad-grid { grid-template-columns:repeat(4,1fr); gap:var(--space-5); } }
@media (min-width:1100px) { .ad-grid { grid-template-columns:repeat(6,1fr); } }

@media (max-width:1180px) {
  .ad-desk-menu { display:none !important; }
  .ad-burger { display:flex !important; }
}
@media (max-width:760px) {
  .ad-modal-grid { grid-template-columns:1fr !important; }
  .ad-modal-media { min-height:240px !important; }
}
.ad-scroll-hide::-webkit-scrollbar { display:none; }
@keyframes ad-tab-nudge { 0%,100%{transform:translateX(0)} 50%{transform:translateX(5px)} }
@keyframes ad-modal-in { from{opacity:0; transform:translateY(16px) scale(.98)} to{opacity:1; transform:none} }
@keyframes ad-fade-in { from{opacity:0} to{opacity:1} }
@keyframes ad-menu-in { from{transform:translateX(100%)} to{transform:none} }

/* Skeleton de carga del catálogo */
.ad-skeleton {
  background:linear-gradient(100deg, var(--cream-200) 30%, var(--cream-50) 50%, var(--cream-200) 70%);
  background-size:200% 100%; animation:ad-shimmer 1.3s var(--ease-in-out) infinite;
}
@keyframes ad-shimmer { from{background-position:200% 0} to{background-position:-200% 0} }