/* ============================================================
   es.PocketChampion.org — Sistema de diseño "Fiesta Mediterránea"
   Terracota, oliva, arena · texturas dibujadas a mano · collage flamenco
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=Fraunces:opsz,wght@9..144,600;9..144,700;9..144,900&family=Quicksand:wght@400;500;600;700&display=swap');

:root {
  --terra: #D2691E;
  --terralight: #E07A3E;
  --terradark: #A84A12;
  --olive: #6B8E23;
  --oliveglow: #8FB33F;
  --olivedark: #4A6317;
  --cream: #FFF5E6;
  --creamdark: #FAEED6;
  --sand: #F3E3C8;
  --gold: #F4A900;
  --wine: #8B1A1A;
  --ink: #3A2E2A;
  --clay: #C97B63;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Quicksand', 'Trebuchet MS', sans-serif;
  background-color: var(--cream);
  color: var(--ink);
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 700;
}

.script { font-family: 'Caveat', cursive; font-weight: 600; }

/* ---------- texturas y decoración ---------- */
.texture-dots {
  background-image: radial-gradient(var(--terra) 1.2px, transparent 1.2px);
  background-size: 18px 18px;
  opacity: .08;
}
.texture-stripes {
  background-image: repeating-linear-gradient(45deg, rgba(139,26,26,.05) 0 9px, transparent 9px 20px);
}
.texture-cross {
  background-image:
    linear-gradient(45deg, rgba(107,142,35,.07) 25%, transparent 25%, transparent 75%, rgba(107,142,35,.07) 75%),
    linear-gradient(45deg, rgba(107,142,35,.07) 25%, transparent 25%, transparent 75%, rgba(107,142,35,.07) 75%);
  background-size: 22px 22px;
  background-position: 0 0, 11px 11px;
}
/* rayos de sol decorativos */
.sun-rays {
  background: conic-gradient(from 0deg at 50% 50%,
    rgba(244,169,0,.14) 0deg, transparent 20deg,
    rgba(244,169,0,.14) 40deg, transparent 60deg,
    rgba(244,169,0,.14) 80deg, transparent 100deg,
    rgba(244,169,0,.14) 120deg, transparent 140deg,
    rgba(244,169,0,.14) 160deg, transparent 180deg,
    rgba(244,169,0,.14) 200deg, transparent 220deg,
    rgba(244,169,0,.14) 240deg, transparent 260deg,
    rgba(244,169,0,.14) 280deg, transparent 300deg,
    rgba(244,169,0,.14) 320deg, transparent 340deg,
    rgba(244,169,0,.14) 360deg);
}

/* ---------- bordes y sombras ---------- */
.hand-border { border-radius: 2rem 1rem 2.5rem 1.5rem; }
.hand-border-sm { border-radius: 1.5rem 1rem 2rem .75rem; }
.fiesta-shadow { box-shadow: 8px 10px 0 rgba(139,26,26,.12); }
.fiesta-shadow-hover:hover { box-shadow: 12px 14px 0 rgba(139,26,26,.16); }
.card-hover { transition: all .35s ease; }
.card-hover:hover { transform: translateY(-8px) rotate(-.5deg); }
.tilt-1 { transform: rotate(-1.6deg); }
.tilt-2 { transform: rotate(1.3deg); }

/* ---------- botones ---------- */
.btn-fiesta { transition: all .25s ease; border-radius: 1.25rem .75rem 1.25rem .75rem; }
.btn-fiesta:hover { transform: scale(1.05) rotate(1deg); }

/* ---------- gradientes ---------- */
.gradient-warm { background: linear-gradient(135deg, #FFF5E6 0%, #FAEED6 45%, #F7DEC0 100%); }
.gradient-terra { background: linear-gradient(135deg, #D2691E 0%, #E07A3E 60%, #F4A900 100%); }
.diagonal-clip { clip-path: polygon(0 0, 100% 4%, 100% 100%, 0 96%); }

/* ---------- navegación ---------- */
.nav-link { position: relative; }
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--gold);
  border-radius: 2px;
  transition: width .3s ease;
}
.nav-link:hover::after,
.nav-link.active::after { width: 100%; }
.nav-link.active { color: var(--gold); }

/* ---------- foco visible ---------- */
a:focus-visible, button:focus-visible, select:focus-visible,
input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: .4rem;
}

/* ---------- barra de descarga fija en móvil (≤768px) ---------- */
.mobile-dl-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: none;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 56px;
  padding: .8rem 1rem calc(.8rem + env(safe-area-inset-bottom));
  background: linear-gradient(135deg, var(--terra) 0%, var(--terralight) 55%, var(--gold) 100%);
  color: #fff;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  box-shadow: 0 -8px 24px rgba(139,26,26,.28);
  border-top: 3px solid var(--wine);
}
.mobile-dl-bar:hover { color: #fff; filter: brightness(1.05); }

@media (max-width: 768px) {
  .mobile-dl-bar { display: flex; }
  body { padding-bottom: 72px; }
}

/* ---------- etiquetas y chips ---------- */
.label-chip {
  display: inline-block;
  padding: .2rem .9rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .02em;
}

/* ---------- cuerpo de artículo ---------- */
.article-body p { color: rgba(58,46,42,.82); margin-bottom: 1.5rem; line-height: 1.8; }
.article-body ul, .article-body ol { color: rgba(58,46,42,.82); line-height: 1.8; }
.article-body li { margin-bottom: .45rem; }
.article-body strong { color: var(--ink); }
.article-body a { color: var(--terra); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.article-body a:hover { color: var(--terradark); }