/* ── Archivo Escolar PR · piragua palette, notebook + Old San Juan ───────── */

:root {
  --tinta: #23343f;
  --mar: #0e7fa6;
  --cielo: #a8e4ef;
  --arena: #fff3dc;
  --papel: #fffdf5;
  --mango: #ffb520;
  --coral: #ff5d5d;
  --lima: #6bcb77;
  --flor: #ff7bac;
  --azulejo: #4fc3e8;
  --linea-libreta: rgba(79, 195, 232, 0.35);
  --pop: 4px 4px 0 rgba(35, 52, 63, 0.9);
  --pop-soft: 5px 6px 0 rgba(35, 52, 63, 0.12);
  /* theme-dependent: text and accents that sit on the page background */
  --texto: #23343f;
  --texto-suave: #5a6b76;
  --acento: #0e7fa6;
  --bg1: #a8e4ef;
  --bg2: #cfeef2;
  --bg3: #fff3dc;
  --h1-sombra: rgba(255, 255, 255, 0.65);
  --facades: url("/static/facades.svg");
  --cobble1: #5b7a99;
  --cobble2: #4d6a87;
  --cobble-borde: var(--tinta);
  font-family: Nunito, ui-sans-serif, system-ui, sans-serif;
  color: var(--texto);
}

/* Noche en San Juan */
:root[data-theme="dark"] {
  --texto: #f1ecdf;
  --texto-suave: #a4b6c1;
  --acento: #7fd4ec;
  --bg1: #0a1630;
  --bg2: #0f2340;
  --bg3: #15202e;
  --h1-sombra: rgba(0, 0, 0, 0.4);
  --facades: url("/static/facades-night.svg");
  --cobble1: #2b3b53;
  --cobble2: #233149;
  --cobble-borde: #0a0f1c;
  --pop: 4px 4px 0 rgba(0, 0, 0, 0.55);
  --pop-soft: 5px 6px 0 rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--texto);
  background: linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 34%, var(--bg3) 62%);
}

header, main, footer, dialog { position: relative; z-index: 1; }

/* ── sky decor: sun + clouds by day, stars + moon by night ───────────────── */

.sky-decor {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: min(860px, 130vh);
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.star-layer, .moon { display: none; }
:root[data-theme="dark"] .star-layer,
:root[data-theme="dark"] .moon { display: block; }
:root[data-theme="dark"] .sun,
:root[data-theme="dark"] .cloud { display: none; }

.sun {
  position: absolute;
  top: 92px;
  right: 8%;
  width: clamp(70px, 8.5vw, 110px);
  height: clamp(70px, 8.5vw, 110px);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #ffd166 0 55%, var(--mango) 100%);
  border: 3px solid var(--tinta);
  box-shadow: 4px 4px 0 rgba(35, 52, 63, 0.18), 0 0 52px rgba(255, 181, 32, 0.5);
}

.sun::before {
  /* chunky rays */
  content: "";
  position: absolute;
  inset: -26%;
  border-radius: 50%;
  background: conic-gradient(
    from 8deg,
    rgba(255, 181, 32, 0.85) 0 9deg, transparent 9deg 30deg,
    rgba(255, 181, 32, 0.85) 30deg 39deg, transparent 39deg 60deg,
    rgba(255, 181, 32, 0.85) 60deg 69deg, transparent 69deg 90deg,
    rgba(255, 181, 32, 0.85) 90deg 99deg, transparent 99deg 120deg,
    rgba(255, 181, 32, 0.85) 120deg 129deg, transparent 129deg 150deg,
    rgba(255, 181, 32, 0.85) 150deg 159deg, transparent 159deg 180deg,
    rgba(255, 181, 32, 0.85) 180deg 189deg, transparent 189deg 210deg,
    rgba(255, 181, 32, 0.85) 210deg 219deg, transparent 219deg 240deg,
    rgba(255, 181, 32, 0.85) 240deg 249deg, transparent 249deg 270deg,
    rgba(255, 181, 32, 0.85) 270deg 279deg, transparent 279deg 300deg,
    rgba(255, 181, 32, 0.85) 300deg 309deg, transparent 309deg 330deg,
    rgba(255, 181, 32, 0.85) 330deg 339deg, transparent 339deg 360deg
  );
  z-index: -1;
}

.cloud {
  position: absolute;
  width: 120px;
  height: 34px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  filter: drop-shadow(4px 5px 0 rgba(35, 52, 63, 0.12));
}

.cloud::before, .cloud::after {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
}

.cloud::before { width: 48px; height: 48px; left: 18px; top: -24px; }
.cloud::after { width: 34px; height: 34px; left: 62px; top: -14px; }

.cloud:nth-of-type(5) { top: 130px; left: 6%; }
.cloud:nth-of-type(6) { top: 320px; right: 16%; transform: scale(0.8); }
.cloud:nth-of-type(7) { top: 250px; left: 38%; transform: scale(0.62); opacity: 0.8; }

.star-layer {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.6px 1.6px at 22px 34px, #fff8e1 60%, transparent 100%),
    radial-gradient(1.4px 1.4px at 128px 92px, #cfe8ff 60%, transparent 100%),
    radial-gradient(1.8px 1.8px at 214px 40px, #fff8e1 60%, transparent 100%),
    radial-gradient(1.3px 1.3px at 74px 158px, #ffe9b8 60%, transparent 100%),
    radial-gradient(1.5px 1.5px at 182px 186px, #ffffff 60%, transparent 100%);
  background-size: 260px 220px;
  opacity: 0.9;
}

.star-layer-2 {
  background-image:
    radial-gradient(2.4px 2.4px at 56px 66px, #fff8e1 60%, transparent 100%),
    radial-gradient(2px 2px at 250px 148px, #ffe9b8 60%, transparent 100%),
    radial-gradient(2.2px 2.2px at 160px 12px, #cfe8ff 60%, transparent 100%);
  background-size: 340px 300px;
  opacity: 0.85;
}

.moon {
  position: absolute;
  top: 84px;
  right: 7%;
  width: clamp(72px, 9vw, 118px);
  height: clamp(72px, 9vw, 118px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 30%, #e8d795 0 12%, transparent 13%),
    radial-gradient(circle at 62% 58%, #e8d795 0 9%, transparent 10%),
    radial-gradient(circle at 44% 74%, #e8d795 0 7%, transparent 8%),
    radial-gradient(circle at 72% 26%, #e8d795 0 6%, transparent 7%),
    #fff3c4;
  border: 3px solid #0a0f1c;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.35), 0 0 46px rgba(255, 240, 180, 0.35);
  transform: rotate(-8deg);
}

@media (prefers-reduced-motion: no-preference) {
  .star-layer { animation: twinkle 4.5s ease-in-out infinite; }
  .star-layer-2 { animation: twinkle 3.2s ease-in-out infinite reverse; }
  @keyframes twinkle {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 0.45; }
  }

  .sun::before { animation: rays 120s linear infinite; }
  @keyframes rays {
    to { transform: rotate(360deg); }
  }

  /* `translate` animates independently, so each cloud keeps its scale() */
  .cloud { animation: drift 16s ease-in-out infinite alternate; }
  .cloud:nth-of-type(6) { animation-duration: 22s; }
  .cloud:nth-of-type(7) { animation-duration: 12s; animation-delay: -6s; }
  @keyframes drift {
    from { translate: 0 0; }
    to { translate: 34px 0; }
  }
}

button, textarea, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }

h1, h2, h3 {
  margin-top: 0;
  font-family: "Baloo 2", "Comic Sans MS", cursive;
  font-weight: 800;
}

.eyebrow {
  margin: 0 0 14px;
  font-family: "Patrick Hand", cursive;
  font-size: 20px;
  color: var(--acento);
  transform: rotate(-1deg);
}

/* ── header ──────────────────────────────────────────────────────────────── */

.site-header {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  width: 46px;
  height: 46px;
  display: block;
  filter: drop-shadow(3px 3px 0 rgba(35, 52, 63, 0.55));
}

/* the inline logo follows the site theme (lit windows at night) */
:root[data-theme="dark"] .brand-mark { filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.55)); }
:root[data-theme="dark"] .brand-mark .sky { fill: #0f2340; }
:root[data-theme="dark"] .brand-mark .win { fill: #ffd98a; }

.brand strong, .brand small { display: block; }
.brand strong { font-family: "Baloo 2", cursive; font-weight: 800; font-size: 19px; }
.brand small { font-family: "Patrick Hand", cursive; color: var(--acento); font-size: 15px; margin-top: 1px; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.theme-toggle {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 3px solid var(--tinta);
  border-radius: 50%;
  background: var(--papel);
  font-size: 19px;
  line-height: 1;
  box-shadow: var(--pop);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.theme-toggle:hover { transform: translate(-2px, -2px) rotate(-10deg); }

.source-button {
  font-family: "Baloo 2", cursive;
  font-weight: 700;
  border: 3px solid var(--tinta);
  background: var(--papel);
  padding: 9px 18px;
  border-radius: 999px;
  box-shadow: var(--pop);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.source-button:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 rgba(35, 52, 63, 0.9); }

/* ── hero ────────────────────────────────────────────────────────────────── */

.hero {
  width: min(1060px, calc(100% - 40px));
  margin: 0 auto;
  padding: 56px 0 72px;
}

h1 {
  max-width: 900px;
  margin-bottom: 18px;
  font-size: clamp(52px, 8vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--texto);
  text-shadow: 4px 4px 0 var(--h1-sombra);
}

.hero-copy {
  max-width: 620px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.55;
  margin: 0 0 36px;
}

/* the search panel is a page from a composition notebook */
.search-panel {
  position: relative;
  color: var(--tinta);
  background:
    repeating-linear-gradient(
      to bottom,
      var(--papel) 0,
      var(--papel) 31px,
      var(--linea-libreta) 31px,
      var(--linea-libreta) 33px
    );
  border: 3px solid var(--tinta);
  border-radius: 6px 22px 22px 6px;
  padding: 26px 26px 22px 64px;
  box-shadow: 7px 8px 0 rgba(35, 52, 63, 0.18);
}

.search-panel::before {
  /* red margin line */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 44px;
  width: 2px;
  background: rgba(255, 93, 93, 0.55);
}

.tape {
  position: absolute;
  top: -14px;
  left: 50%;
  width: 130px;
  height: 26px;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(255, 181, 32, 0.75);
  border-left: 2px dashed rgba(255, 255, 255, 0.7);
  border-right: 2px dashed rgba(255, 255, 255, 0.7);
}

.search-panel > label {
  display: block;
  margin-bottom: 12px;
  font-family: "Patrick Hand", cursive;
  font-size: 21px;
  color: var(--mar);
}

.search-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
}

textarea {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  border: 2px solid var(--tinta);
  border-radius: 14px;
  background: #fff;
  color: var(--tinta);
  padding: 16px;
  line-height: 1.45;
  font-size: 17px;
}

textarea:focus {
  outline: 3px solid var(--azulejo);
  outline-offset: 2px;
}

.search-submit {
  min-width: 150px;
  border: 3px solid var(--tinta);
  border-radius: 16px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: var(--mango);
  color: var(--tinta);
  font-family: "Baloo 2", cursive;
  font-weight: 800;
  font-size: 19px;
  box-shadow: var(--pop);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.search-submit:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 rgba(35, 52, 63, 0.9); }
.search-submit:disabled { opacity: 0.6; cursor: wait; transform: none; }

.search-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 14px;
}

fieldset {
  display: flex;
  gap: 18px;
  border: 0;
  padding: 0;
  margin: 0;
  font-weight: 600;
}

legend {
  float: left;
  margin-right: 18px;
  font-family: "Patrick Hand", cursive;
  font-size: 18px;
  color: var(--mar);
}

input[type="radio"] { accent-color: var(--coral); }
.search-options p { color: var(--mar); margin: 0; font-size: 13px; font-weight: 700; }

/* piragua-flavor example chips */
.examples {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.examples > span {
  font-family: "Patrick Hand", cursive;
  font-size: 18px;
  color: var(--texto);
}

.examples button {
  border: 2.5px solid var(--tinta);
  border-radius: 999px;
  padding: 10px 16px;
  color: var(--tinta);
  font-size: 14px;
  font-weight: 700;
  box-shadow: 3px 3px 0 rgba(35, 52, 63, 0.85);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.examples button:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 rgba(35, 52, 63, 0.85); }
.flavor-frambuesa { background: var(--flor); }
.flavor-mango { background: var(--mango); }
.flavor-limon { background: var(--lima); }

/* ── Old San Juan street strip (signature) ───────────────────────────────── */

.street {
  /* tiles the facade drawing horizontally so any viewport width — including
     2K+ monitors — shows more houses instead of scaling and cropping them */
  position: relative;
  z-index: 1;
  height: calc(clamp(90px, 14vw, 170px) + 34px);
  background: var(--facades) left 0 bottom 34px repeat-x;
  background-size: auto calc(100% - 34px);
}

.street::after {
  /* adoquines: the blue cobblestones of Viejo San Juan */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26px;
  background:
    repeating-linear-gradient(
      90deg,
      var(--cobble1) 0,
      var(--cobble1) 46px,
      var(--cobble2) 46px,
      var(--cobble2) 50px
    );
  border-top: 4px solid var(--cobble-borde);
  border-bottom: 4px solid var(--cobble-borde);
}

/* ── results ─────────────────────────────────────────────────────────────── */

.results-section {
  width: min(1060px, calc(100% - 40px));
  margin: 0 auto;
  padding: 58px 0 90px;
  scroll-margin-top: 20px;
}

.results-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 12px;
}

.results-heading h2, .method h2, dialog h2 {
  margin-bottom: 0;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.05;
}

.confidence {
  border: 2.5px solid var(--tinta);
  border-radius: 999px;
  padding: 8px 14px;
  font-family: "Baloo 2", cursive;
  font-weight: 700;
  font-size: 14px;
  color: var(--tinta);
  background: var(--papel);
  transform: rotate(2deg);
}

.confidence[data-level="alta"] { background: var(--lima); }
.confidence[data-level="media"] { background: var(--mango); }
.confidence[data-level="baja"] { background: var(--flor); }

.corrections {
  margin: 0 0 14px;
  font-family: "Patrick Hand", cursive;
  font-size: 18px;
  color: var(--acento);
}

.correction-chip {
  display: inline-block;
  border: 2px solid var(--tinta);
  background: var(--papel);
  border-radius: 999px;
  padding: 3px 12px;
  margin: 2px 2px 2px 0;
}

.correction-chip strong { color: var(--coral); }

.situation-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
}

.situation-chips > span { font-family: "Patrick Hand", cursive; font-size: 17px; }

.situation-chips button {
  border: 2px dashed var(--mar);
  background: rgba(255, 253, 245, 0.8);
  border-radius: 999px;
  padding: 7px 14px;
  color: var(--mar);
  font-weight: 700;
  font-size: 13px;
}

.situation-chips button:hover { background: var(--azulejo); color: var(--tinta); border-style: solid; }

.result-notice {
  margin: 0 0 24px;
  color: var(--texto-suave);
  font-size: 14px;
  font-weight: 600;
}

.results-list { display: grid; gap: 18px; }

.result-card {
  position: relative;
  color: var(--tinta);
  background: var(--papel);
  border: 3px solid var(--tinta);
  border-radius: 18px;
  padding: 24px;
  box-shadow: var(--pop-soft);
}

.result-topline {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.result-rank {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 2.5px solid var(--tinta);
  border-radius: 50%;
  font-family: "Baloo 2", cursive;
  font-weight: 800;
  font-size: 16px;
  background: var(--azulejo);
}

/* crayon-box rotation for the rank badges */
.result-card:nth-child(5n + 1) .result-rank { background: var(--coral); color: #fff; }
.result-card:nth-child(5n + 2) .result-rank { background: var(--mango); }
.result-card:nth-child(5n + 3) .result-rank { background: var(--lima); }
.result-card:nth-child(5n + 4) .result-rank { background: var(--azulejo); }
.result-card:nth-child(5n) .result-rank { background: var(--flor); }

.status {
  align-self: start;
  background: var(--lima);
  color: var(--tinta);
  border: 2px solid var(--tinta);
  border-radius: 999px;
  padding: 6px 12px;
  font-family: "Baloo 2", cursive;
  font-size: 12px;
  font-weight: 700;
  transform: rotate(-2deg);
  box-shadow: 2px 2px 0 rgba(35, 52, 63, 0.6);
}

.status.historico { background: #e8dcc3; }

.result-card h3 { margin-bottom: 7px; font-size: 21px; }
.citation { margin: 0 0 16px; color: #5a6b76; font-size: 14px; font-weight: 600; }

.official-text {
  margin: 0;
  padding: 16px 16px 16px 20px;
  border-left: 5px solid var(--mango);
  border-radius: 0 12px 12px 0;
  background: rgba(255, 181, 32, 0.08);
  white-space: pre-line;
  line-height: 1.6;
}

.official-text mark {
  background: var(--mango);
  color: var(--tinta);
  border-radius: 4px;
  padding: 0 3px;
}

.result-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 700;
  color: #5a6b76;
}

.result-actions a {
  color: var(--mar);
  font-family: "Baloo 2", cursive;
  font-size: 15px;
  text-underline-offset: 4px;
  text-decoration-thickness: 2.5px;
  text-decoration-color: var(--mango);
}

.result-actions a:hover { text-decoration-color: var(--coral); }

/* sticky-note for clarifying questions */
.clarify-card {
  position: relative;
  padding: 20px 24px;
  border: 2px solid rgba(35, 52, 63, 0.35);
  border-radius: 4px;
  background: #fff3ae;
  font-family: "Patrick Hand", cursive;
  font-size: 19px;
  line-height: 1.5;
  transform: rotate(-0.8deg);
  box-shadow: var(--pop-soft);
}

.clarify-card strong { color: var(--mar); }

/* ── chalkboard method section ───────────────────────────────────────────── */

.method {
  width: min(1100px, calc(100% - 28px));
  margin: 0 auto 80px;
  padding: 54px clamp(24px, 5vw, 64px);
  background: #2e5b47;
  color: #f3f7ee;
  border: 10px solid #8b5a34;
  border-radius: 16px;
  box-shadow: 0 14px 0 rgba(35, 52, 63, 0.25);
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 56px;
}

.method .eyebrow { color: #ffd166; transform: rotate(-1.5deg); }
.method h2 { font-family: "Patrick Hand", cursive; font-weight: 400; color: #fdfdf6; }
.method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.method article { border-top: 2px dashed rgba(255, 255, 255, 0.4); padding-top: 18px; }

.method article > span {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 2px dashed #ffd166;
  border-radius: 50%;
  font-family: "Patrick Hand", cursive;
  font-size: 17px;
  color: #ffd166;
}

.method h3 {
  margin: 18px 0 10px;
  font-family: "Patrick Hand", cursive;
  font-weight: 400;
  font-size: 22px;
}

.method article p {
  margin: 0;
  font-family: "Patrick Hand", cursive;
  color: #d8e6d3;
  line-height: 1.55;
  font-size: 17px;
}

.method article:nth-child(1) h3 { color: #ffd1e3; }
.method article:nth-child(2) h3 { color: #bfe8ff; }
.method article:nth-child(3) h3 { color: #d6f5b0; }

/* ── footer ──────────────────────────────────────────────────────────────── */

footer {
  min-height: 120px;
  padding: 28px max(20px, calc((100vw - 1060px) / 2)) 40px;
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: center;
  color: var(--texto-suave);
  font-size: 13px;
  font-weight: 600;
}

footer p { max-width: 620px; }
#indexStatus { font-family: "Patrick Hand", cursive; font-size: 16px; color: var(--acento); }

/* ── dialog ──────────────────────────────────────────────────────────────── */

dialog {
  width: min(760px, calc(100% - 30px));
  max-height: min(760px, calc(100vh - 30px));
  border: 3px solid var(--tinta);
  border-radius: 20px;
  padding: 26px;
  background: var(--papel);
  color: var(--tinta);
  box-shadow: 10px 10px 0 rgba(35, 52, 63, 0.3);
}

dialog::backdrop { background: rgba(14, 127, 166, 0.45); backdrop-filter: blur(4px); }
.dialog-header { display: flex; justify-content: space-between; gap: 20px; }
.dialog-header button { border: 0; background: transparent; font-size: 34px; line-height: 1; }
.source-list { display: grid; gap: 10px; margin-top: 22px; }

.source-item {
  border-top: 2px dashed rgba(35, 52, 63, 0.25);
  padding-top: 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
}

.source-item a { color: var(--mar); font-weight: 800; }
.source-item p { margin: 5px 0 0; color: #5a6b76; font-size: 13px; }

/* ── states ──────────────────────────────────────────────────────────────── */

.loading-card, .error-card {
  padding: 30px;
  border: 3px solid var(--tinta);
  border-radius: 18px;
  color: var(--tinta);
  background: var(--papel);
  font-weight: 600;
}

.error-card { border-color: var(--coral); background: #fff0f0; color: #8c2f2f; }

.skeleton-card {
  padding: 24px;
  border: 3px solid rgba(35, 52, 63, 0.25);
  border-radius: 18px;
  background: var(--papel);
  display: grid;
  gap: 12px;
  animation: pulse 1.4s ease-in-out infinite;
}

.skeleton-line {
  display: block;
  height: 13px;
  border-radius: 6px;
  background: linear-gradient(90deg, #ffe3b0, #d8f2f8, #ffe3b0);
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.72; }
}

@keyframes shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 3px solid var(--mar);
  outline-offset: 2px;
}

/* ── responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 820px) {
  .hero { padding-top: 40px; }
  .search-row { grid-template-columns: 1fr; }
  .search-submit { min-height: 56px; justify-content: center; }
  .search-options { align-items: flex-start; flex-direction: column; }
  fieldset { flex-wrap: wrap; gap: 10px 16px; }
  legend { width: 100%; margin-bottom: 8px; }
  .method { grid-template-columns: 1fr; gap: 30px; }
  .method-grid { grid-template-columns: 1fr; }
  footer { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 520px) {
  .site-header, .hero, .results-section { width: min(100% - 24px, 1060px); }
  .brand small { display: none; }
  .source-button { padding: 8px 12px; }
  h1 { font-size: 52px; }
  .search-panel { padding: 22px 16px 18px 48px; }
  .search-panel::before { left: 32px; }
  .results-heading, .result-topline, .result-actions { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: no-preference) {
  .result-card { animation: rise 420ms both; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-card, .skeleton-line { animation: none; }
  .source-button, .search-submit, .examples button { transition: none; }
}