/* ==========================================================
   Duelo Latino — brand layer
   Load AFTER the site's existing stylesheet.
   Fonts: add this to <head> once:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Nunito:wght@400;600;700;800&family=Salsa&display=swap">
   Asset paths assume the kit's /assets folder sits at the site root.
   ========================================================== */

:root {
  /* Color */
  --dl-cempasuchil: #F0A630;  /* warm accent */
  --dl-mandarina:   #E0702E;  /* groups */
  --dl-rosa:        #E84E86;  /* counseling */
  --dl-bugambilia:  #C33C8C;  /* links */
  --dl-jacaranda:   #7E3C8C;  /* gradient end */
  --dl-jade:        #268C8B;  /* education, calm */
  --dl-ciruela:     #4A2238;  /* text, dark sections */
  --dl-cacao:       #3B2A22;  /* footer */
  --dl-masa:        #F7F1E3;  /* base background */
  --dl-crema:       #FBF7EE;  /* cards, alt sections */
  --dl-oro:         #F6C548;  /* primary button */
  --dl-ink-soft:    #5E4150;  /* body copy on light */
  --dl-line:        #EADFCB;

  /* Gradients */
  --dl-grad-amanecer: linear-gradient(118deg, #F2AE38 0%, #E9785A 32%, #E84E86 58%, #7E3C8C 100%);
  --dl-grad-atardecer: linear-gradient(110deg, #E0702E 0%, #C33C8C 100%);
  --dl-grad-jade: linear-gradient(110deg, #268C8B 0%, #4A2238 100%);
  --dl-grad-petalo: linear-gradient(110deg, #FBF3E4 0%, #F9DCC4 50%, #F1D6E6 100%);

  /* Type */
  --dl-font-logo: 'Salsa', 'Trebuchet MS', cursive;          /* logo + short phrases only */
  --dl-font-display: 'DM Serif Display', Georgia, serif;     /* headings */
  --dl-font-body: 'Nunito', system-ui, sans-serif;           /* everything else */

  /* Shape */
  --dl-radius-card: 28px;
  --dl-radius-pill: 999px;
  --dl-shadow-card: 0 1px 0 var(--dl-line), 0 20px 40px -24px rgba(74, 34, 56, .25);
}

body { font-family: var(--dl-font-body); color: var(--dl-ciruela); background: var(--dl-masa); }
h1, h2, h3 { font-family: var(--dl-font-display); font-weight: 400; color: var(--dl-ciruela); }
a { color: var(--dl-bugambilia); }
a:hover { color: var(--dl-jacaranda); }

/* ---------- Text helpers ---------- */
.dl-script   { font-family: var(--dl-font-logo); }
.dl-eyebrow  { font: 800 13px/1.2 var(--dl-font-body); letter-spacing: .18em; text-transform: uppercase; color: #C9571E; }
.dl-on-dark .dl-eyebrow { color: #F389B0; }

/* ---------- Backgrounds ---------- */
/* Patterns: one .dl-pattern-* per patterned area, wrapping .dl-panel children. Never on sibling sections. */
.dl-bg-amanecer { background: var(--dl-grad-amanecer); }
.dl-bg-ciruela  { background: var(--dl-ciruela); color: var(--dl-crema); }
.dl-bg-jade     { background: var(--dl-jade); color: #fff; }
.dl-bg-cacao    { background: var(--dl-cacao); color: #E9DCCF; }

/* Subtle weave texture over a gradient: add to the section, keep content above it */
.dl-texture { position: relative; isolation: isolate; }
.dl-texture::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .07;
  background: url(/assets/patterns/telar-andino.svg) repeat; background-size: 48px 48px;
}

.dl-pattern-telar     { background: url(/assets/patterns/telar-andino.svg) repeat; background-size: 48px; }
.dl-pattern-talavera  { background: url(/assets/patterns/talavera.svg) repeat; background-size: 80px; }
.dl-pattern-flores    { background: url(/assets/patterns/cempasuchil.svg) repeat var(--dl-ciruela); background-size: 160px; }
.dl-pattern-zone { position: relative; }
.dl-pattern-zone > .dl-panel { margin-block: 0; background: transparent; }
.dl-pattern-zone--muted { background-color: var(--dl-crema); background-image: none; isolation: isolate; }
.dl-pattern-zone--muted::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .7;
  background: url(/assets/patterns/telar-andino.svg) repeat; background-size: 48px;
}

/* ---------- Dividers (tapete: max TWO per page) ---------- */
.dl-tapete {
  height: 28px; border: 0; margin: 0;
  background: url(/assets/patterns/tapete.svg) repeat-x; background-size: 48px 28px;
}
.dl-tapete--thin { height: 18px; background-size: 31px 18px; }

.dl-rebozo {
  height: 14px; border-radius: 7px;
  background: repeating-linear-gradient(90deg,
    #4A2238 0 22px, #F0A630 22px 30px, #E84E86 30px 52px, #FBF3E4 52px 55px,
    #268C8B 55px 70px, #F6C548 70px 74px, #7E3C8C 74px 96px, #E0702E 96px 104px);
}

/* Papel picado banner: <div class="dl-picado" aria-hidden="true"></div> */
.dl-picado {
  height: 100px; margin-top: -2px;
  background: url(/assets/patterns/picado-banner.svg) repeat-x left top; background-size: auto 100px;
}
.dl-picado--sm { height: 64px; background-size: auto 64px; }

/* ---------- Buttons ---------- */
.dl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 14px 28px; border-radius: var(--dl-radius-pill);
  font: 800 17px/1 var(--dl-font-body); text-decoration: none; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.dl-btn--primary { background: var(--dl-oro); color: #2E1322; border: 0; box-shadow: 0 5px 0 var(--dl-ciruela); }
.dl-btn--primary:hover { transform: translateY(2px); box-shadow: 0 3px 0 var(--dl-ciruela); color: #2E1322; }
.dl-btn--dark    { background: var(--dl-ciruela); color: var(--dl-crema); border: 0; box-shadow: 0 5px 0 var(--dl-cempasuchil); }
.dl-btn--dark:hover { color: var(--dl-crema); transform: translateY(2px); box-shadow: 0 3px 0 var(--dl-cempasuchil); }
.dl-btn--ghost   { background: transparent; color: #2E1322; border: 2px solid currentColor; }
.dl-on-dark .dl-btn--ghost { color: var(--dl-oro); }

/* ---------- Stickers ---------- */
.dl-sticker {
  display: inline-block; transform: rotate(-4deg);
  background: var(--dl-crema); color: var(--dl-ciruela);
  font: 26px/1.1 var(--dl-font-logo); padding: 10px 22px; border-radius: 14px;
  box-shadow: 5px 5px 0 var(--dl-ciruela);
}
.dl-sticker--oro { background: var(--dl-oro); }
.dl-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--dl-radius-pill);
  font: 800 13px/1 var(--dl-font-body); letter-spacing: .14em; text-transform: uppercase;
  background: var(--dl-ciruela); color: var(--dl-oro);
}

/* ---------- Service cards ---------- */
.dl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; }
.dl-card { background: #fff; border-radius: var(--dl-radius-card); overflow: hidden; box-shadow: var(--dl-shadow-card); display: flex; flex-direction: column; }
.dl-card__band { position: relative; height: 120px; background: var(--band, var(--dl-mandarina)); padding: 0 28px; display: flex; align-items: flex-end; }
.dl-card__band::after { content: ""; position: absolute; right: 0; top: 0; width: 130px; height: 100%; opacity: .35; background: var(--band-pattern, url(/assets/patterns/telar-andino.svg)) repeat; background-size: 48px; }
.dl-card__icon { position: relative; z-index: 1; width: 96px; height: 96px; border-radius: 50%; background: #fff; transform: translateY(40px); display: grid; place-items: center; box-shadow: 0 6px 16px rgba(74, 34, 56, .18); }
.dl-card__icon img { width: 60%; height: auto; }
.dl-card__body { padding: 60px 28px 32px; display: flex; flex-direction: column; gap: 10px; }
.dl-card__body p { margin: 0; color: var(--dl-ink-soft); line-height: 1.6; }
.dl-card--grupos    { --band: var(--dl-mandarina); }
.dl-card--consejeria{ --band: var(--dl-rosa); --band-pattern: url(/assets/patterns/talavera.svg); }
.dl-card--educacion { --band: var(--dl-jade); --band-pattern: url(/assets/patterns/cempasuchil.svg); }

/* ---------- Event cards ---------- */
.dl-event { display: flex; background: var(--dl-crema); border-radius: 22px; overflow: hidden; color: var(--dl-ciruela); }
.dl-event__date { flex: 0 0 110px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 12px; background: var(--date, var(--dl-rosa)); color: #fff; }
.dl-event__date small { font: 800 12px/1.2 var(--dl-font-body); letter-spacing: .1em; text-transform: uppercase; }
.dl-event__date strong { font: 400 28px/1 var(--dl-font-display); }
.dl-event__body { padding: 22px; display: flex; flex-direction: column; gap: 6px; }
.dl-event--virtual  { --date: var(--dl-rosa); }
.dl-event--persona  { --date: var(--dl-cempasuchil); }
.dl-event--persona .dl-event__date { color: #2E1322; }
.dl-event--especial { --date: var(--dl-jade); }

/* ---------- Quote ---------- */
.dl-quote { margin: 0; padding: 26px 30px; background: var(--dl-ciruela); color: var(--dl-crema); border-radius: 4px 28px 28px 28px; font: italic 400 clamp(22px, 2.4vw, 28px)/1.25 var(--dl-font-display); }

/* ---------- Hero ---------- */
.dl-hero { position: relative; overflow: hidden; background: var(--dl-grad-amanecer); }
.dl-hero h1 { font-size: clamp(56px, 8vw, 118px); line-height: .9; letter-spacing: -.02em; color: #2E1322; margin: 0; }
.dl-hero h1 .dl-script { color: var(--dl-crema); letter-spacing: 0; }
.dl-hero__photo { position: relative; aspect-ratio: 1; width: min(600px, 90vw); }
.dl-hero__photo img.dl-hero__img { position: absolute; inset: 11.7%; width: 76.6%; height: 76.6%; object-fit: cover; border-radius: 50%; }
.dl-hero__photo img.dl-hero__ring { position: absolute; inset: 0; width: 100%; height: 100%; }

@media (max-width: 720px) {
  .dl-picado { height: 64px; background-size: auto 64px; }
  .dl-sticker { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .dl-btn { transition: none; } }