/* ═══════════════════════════════════════════════════════
   Pues eso Spanish — Site Theme v2
   Warm peach palette · dot background · floating blobs
   ═══════════════════════════════════════════════════════ */

/* ── Warm dot background on all pages ── */
body {
  background-color: #FDF3EA !important;
  background-image: radial-gradient(circle, rgba(170,100,30,0.11) 1.5px, transparent 1.5px) !important;
  background-size: 24px 24px !important;
}

/* keep white surfaces white (don't dot-pattern cards/nav) */
nav, footer, .sec, .quiz-box, .card, .unit-card, .res-card,
.free-card, .lc, .ic, .v-card, .expr-card, .hora-card,
.game-card, .sb-card, .cal-wrap, .conj-wrap, .rule-box,
.contrast-card, .irr-card, .freq-card {
  background-image: none !important;
}

/* ── Hero sections: warm coral/peach ── */
.hero {
  background: linear-gradient(135deg, #F09356 0%, #F4AC74 45%, #F9C89A 80%, #FDDCB8 100%) !important;
  position: relative;
  overflow: hidden;
}

/* aprende-*.html level hero */
.level-hero {
  background: linear-gradient(135deg, #E88A48 0%, #F4A870 50%, #FAC88A 100%) !important;
  position: relative;
  overflow: hidden;
}

/* ── Blob shapes ── */
.blobs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.blob {
  position: absolute;
  border: 2.5px solid rgba(26,26,26,0.20);
  animation: blobFloat ease-in-out infinite;
  will-change: transform;
}

.blob-green {
  width: 110px; height: 100px;
  background: #90D9A8;
  border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
  animation-duration: 7s;
}
.blob-purple {
  width: 82px; height: 88px;
  background: #C4B5FD;
  border-radius: 50% 50% 40% 60% / 45% 60% 40% 55%;
  animation-duration: 9s;
  animation-delay: -2.5s;
}
.blob-teal {
  width: 66px; height: 76px;
  background: #7DD9F5;
  border-radius: 45% 55% 60% 40% / 55% 35% 65% 45%;
  animation-duration: 8s;
  animation-delay: -4s;
}
.blob-yellow {
  width: 54px; height: 54px;
  background: #FDE68A;
  border-radius: 50%;
  animation-duration: 6.5s;
  animation-delay: -1.5s;
}
.blob-pink {
  width: 72px; height: 66px;
  background: #FCA5A5;
  border-radius: 55% 45% 40% 60% / 45% 55% 45% 55%;
  animation-duration: 10s;
  animation-delay: -3s;
}

@keyframes blobFloat {
  0%,  100% { transform: translate(0,    0)    rotate(0deg);  }
  25%        { transform: translate(10px, -14px) rotate(5deg);  }
  50%        { transform: translate(-6px, -20px) rotate(-3deg); }
  75%        { transform: translate(14px, -10px) rotate(7deg);  }
}

/* ── Floating label pills (like in the Canva design) ── */
.float-pill {
  position: absolute;
  background: #ffffff;
  border: 2px solid #1a1a1a;
  border-radius: 50px;
  padding: 5px 14px;
  font-family: 'Fredoka', 'Nunito', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: #1a1a1a;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 2px 3px 0 rgba(0,0,0,0.14);
  z-index: 2;
  animation: pillBob ease-in-out infinite;
}

@keyframes pillBob {
  0%, 100% { transform: translateY(0)   rotate(-2deg); }
  50%       { transform: translateY(-8px) rotate( 2deg); }
}

/* ── Make sure hero inner text sits above blobs ── */
.hero-inner,
.hero > *:not(.blobs):not(.hero-deco) {
  position: relative;
  z-index: 1;
}
.level-hero > * {
  position: relative;
  z-index: 1;
}

/* ── Slightly warmer nav background ── */
nav {
  background: rgba(253,243,234,.95) !important;
  border-bottom-color: #ECD9C6 !important;
}

/* ── Section backgrounds: keep them clean on warm body ── */
.section.alt, .section:not(.dark-section) {
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(2px);
}

/* ── Keep dark sections as-is ── */
.dark-section, .dark-section * {
  background-image: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .blob, .float-pill { animation: none !important; }
}