/* ==========================================================================
   Base: tipografía (roles del design system), contenedor, botones y formularios
   ========================================================================== */

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--espresso);
  background-color: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
}

body[data-chrome="atelier"],
body[data-chrome="appbar"] {
  background-color: var(--surface);
  color: var(--on-surface);
}

::selection { background: var(--blush); color: #fff; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-serif); font-weight: 600; color: inherit; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 2000;
  padding: 0.5rem 1rem; background: var(--burgundy); color: #fff; border-radius: var(--r-full); font-size: 0.875rem;
}
.skip-link:focus { top: 0.75rem; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --- Contenedores --- */
.container-brand {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.5rem;
}
.container-brand--wide { max-width: 90rem; }

/* --- Roles tipográficos (DESIGN.md) --- */
.t-display        { font: 600 52px/60px var(--font-serif); letter-spacing: -0.02em; }
.t-display-mobile { font: 600 34px/40px var(--font-serif); letter-spacing: -0.01em; }
.t-headline-lg    { font: 600 36px/44px var(--font-serif); letter-spacing: -0.01em; }
.t-headline-lg-m  { font: 600 26px/32px var(--font-serif); }
.t-headline-md    { font: 500 24px/30px var(--font-serif); }
.t-headline-sm    { font: 600 20px/26px var(--font-serif); }
.t-title-editorial{ font: 400 18px/24px var(--font-serif); }
.t-body-lg        { font: 400 16px/26px var(--font-sans); }
.t-body-md        { font: 400 14px/22px var(--font-sans); }
.t-body-sm        { font: 400 12px/18px var(--font-sans); }
.t-label-lg       { font: 600 14px/20px var(--font-sans); letter-spacing: 0.02em; }
.t-label-md       { font: 600 12px/16px var(--font-sans); letter-spacing: 0.03em; }
.t-label-sm       { font: 500 11px/14px var(--font-sans); letter-spacing: 0.04em; }

.font-script { font-family: var(--font-script); }
.italic { font-style: italic; }
.upper { text-transform: uppercase; }

/* --- Sello circular giratorio (Stamp) --- */
@keyframes spinSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.animate-spin-slow { animation: spinSlow 28s linear infinite; }

/* --- Botón de corazón (favoritos) sobre tarjetas --- */
.fav-btn .bi-heart-fill { display: none; }
.fav-btn.is-active .bi-heart { display: none; }
.fav-btn.is-active .bi-heart-fill { display: inline-block; }

/* --- Campos de formulario --- */
.field-label { display: block; font: 600 12px/16px var(--font-sans); letter-spacing: 0.03em; margin-bottom: 0.5rem; }
.field-input {
  display: block; width: 100%;
  font: 400 14px/22px var(--font-sans);
  color: var(--on-surface);
  background: var(--surface-container-low);
  border: 1px solid transparent;
  border-radius: var(--r-full);
  padding: 0.75rem 1.25rem;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.field-input::placeholder { color: var(--outline); opacity: 0.8; }
.field-input:focus { outline: none; border-color: var(--primary-container); box-shadow: 0 0 0 3px rgba(113, 62, 72, 0.12); background: #fff; }
textarea.field-input { border-radius: var(--r-md); resize: vertical; min-height: 6rem; }
select.field-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23514345' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  padding-right: 2.5rem;
}
.field-input.is-invalid { border-color: var(--error); }
.field-error { display: none; margin-top: 0.25rem; font: 500 11px/14px var(--font-sans); color: var(--error); }
.is-invalid + .field-error { display: block; }

/* Los elementos de una grilla no deben ensanchar la pista por texto sin salto de línea */
.cg__grid > *, .cm__grid > *, .featured__grid > *, .mh-fav__grid > *, .cats__grid > *, .cr__grid > *,
.mh-cats__grid > *, .fav-grid > *, .search-grid > *, .nv-grid > * { min-width: 0; }