/* ============================================================
   LA GORDITA — Brand motifs: logo, papel picado, patterns
   Depends on colors_and_type.css (vars + fonts).
   These are typographic / geometric CSS assets — reusable
   across every surface. Reference the classes directly.
   ============================================================ */

/* ---------------- WORDMARK ---------------- */
.lg-logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0.12em;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.01em;
  white-space: nowrap;
  font-size: 28px; /* override with font-size to scale */
}
.lg-logo .lg-logo__la {
  font-size: 0.5em;
  font-weight: 600;
  color: var(--maiz-600);
  font-family: var(--font-hand);
  transform: rotate(-7deg);
  transform-origin: bottom left;
  margin-right: 0.05em;
}
.lg-logo .lg-logo__name { color: var(--primary); }
.lg-logo .lg-logo__dot  { color: var(--accent-3); }
.lg-logo--on-dark .lg-logo__name { color: var(--maiz-500); }
.lg-logo--on-dark .lg-logo__la   { color: var(--rosa-300); }

/* ---------------- CIRCULAR BADGE EMBLEM ---------------- */
/* A stamp-style roundel: "LA GORDITA · TORTILLERÍA ·" ring */
.lg-badge {
  --size: 132px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  background:
    radial-gradient(circle at 50% 50%, var(--masa-50) 0 62%, transparent 62%),
    repeating-conic-gradient(from 0deg, var(--maiz-500) 0 9deg, var(--chili-500) 9deg 18deg);
  border: 3px solid var(--cocoa-900);
  box-shadow: var(--shadow-md);
  position: relative;
  color: var(--cocoa-900);
  font-family: var(--font-display);
}
.lg-badge__inner {
  width: 76%; height: 76%;
  border-radius: 50%;
  background: var(--masa-50);
  border: 2px dashed var(--chili-400);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  padding: 6px;
}
.lg-badge__la { font-family: var(--font-hand); font-size: calc(var(--size) * 0.13); color: var(--maiz-700); line-height: 1; }
.lg-badge__name { font-size: calc(var(--size) * 0.165); font-weight: 700; color: var(--primary); line-height: 0.92; }
.lg-badge__sub { font-family: var(--font-body); font-weight: 800; font-size: calc(var(--size) * 0.062); letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-600); }
.lg-badge__est { font-family: var(--font-body); font-weight: 700; font-size: calc(var(--size) * 0.055); letter-spacing: 0.08em; color: var(--fg3); }

/* ---------------- PAPEL PICADO BANNER ---------------- */
/* Cut-paper fiesta banner. Each flag has a scalloped bottom edge
   (single reliable mask layer) and a punched-hole interior cut
   in --picado-hole (defaults to the masa canvas — set it to match
   the surface behind the banner when used on other backgrounds). */
.papel-picado {
  --picado-hole: var(--masa-100);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  width: 100%;
  overflow: hidden;
  border-top: 3px solid var(--cocoa-800);
}
.papel-picado .flag {
  flex: 1 1 0;
  height: 48px;
  position: relative;
  -webkit-mask: radial-gradient(circle 7px at 7px 100%, transparent 7px, #000 7.6px) 0 100% / 14px 100% repeat-x;
          mask: radial-gradient(circle 7px at 7px 100%, transparent 7px, #000 7.6px) 0 100% / 14px 100% repeat-x;
}
/* punched lacework cut */
.papel-picado .flag::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 9px; bottom: 16px;
  background:
    radial-gradient(circle 2.4px at 50% 50%, var(--picado-hole) 62%, transparent 64%) 0 0 / 13px 13px,
    radial-gradient(circle 2.4px at 50% 50%, var(--picado-hole) 62%, transparent 64%) 6.5px 6.5px / 13px 13px;
}
.papel-picado .flag:nth-child(5n+1){ background: var(--rosa-500); }
.papel-picado .flag:nth-child(5n+2){ background: var(--maiz-500); }
.papel-picado .flag:nth-child(5n+3){ background: var(--teal-500); }
.papel-picado .flag:nth-child(5n+4){ background: var(--lima-500); }
.papel-picado .flag:nth-child(5n+5){ background: var(--chili-500); }

/* compact variant */
.papel-picado--sm .flag { height: 32px; }
.papel-picado--sm .flag::before { bottom: 12px; }

/* ---------------- TALAVERA / TILE TEXTURE ---------------- */
/* Subtle warm dotted-tile background for sections. */
.tex-talavera {
  background-color: var(--masa-100);
  background-image:
    radial-gradient(circle at 50% 50%, var(--maiz-100) 1.5px, transparent 2px),
    radial-gradient(circle at 50% 50%, var(--chili-100) 1.5px, transparent 2px);
  background-size: 26px 26px, 26px 26px;
  background-position: 0 0, 13px 13px;
}
/* Warm radial fiesta glow, good behind heroes */
.tex-fiesta-glow {
  background:
    radial-gradient(120% 90% at 0% 0%, var(--maiz-50) 0%, transparent 45%),
    radial-gradient(120% 90% at 100% 0%, var(--rosa-50) 0%, transparent 45%),
    var(--masa-100);
}

/* ---------------- DECORATIVE DIVIDER ---------------- */
.lg-rule {
  height: 5px;
  width: 64px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    var(--chili-500) 0 20%, var(--maiz-500) 20% 40%,
    var(--lima-500) 40% 60%, var(--teal-500) 60% 80%,
    var(--rosa-500) 80% 100%);
}