:root { color-scheme:light; --ink:#14231e; --muted:#42574d; --paper:#f7faf8; --surface:#ffffff; --line:#c7d8ce; --accent:#06704d; --accent-dark:#04563b; --soft:#e6f3eb; --soft-strong:#d7ebdf; --focus:#b85d00; --radius:1rem; --pico-background-color:var(--paper); --pico-color:var(--ink); --pico-muted-color:var(--muted); --pico-primary:var(--accent); --pico-primary-background:var(--accent); --pico-primary-border:var(--accent); --pico-primary-hover:#045c3f; --pico-primary-hover-background:#045c3f; --pico-primary-hover-border:#045c3f; --pico-primary-focus:rgba(6,112,77,.22); --pico-card-background-color:var(--surface); --pico-card-sectioning-background-color:var(--soft); --pico-card-border-color:var(--line); --pico-form-element-background-color:var(--surface); --pico-form-element-border-color:#8ca59a; --pico-form-element-color:var(--ink); --pico-form-element-placeholder-color:#5c7167; --pico-dropdown-background-color:var(--surface); --pico-dropdown-border-color:var(--line); --pico-contrast:var(--ink); --pico-contrast-background:var(--ink); }
* { box-sizing:border-box; } html,body { background:var(--paper); color:var(--ink); } body { margin:0; font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.55; } a,a:not([role="button"]),a:visited,a:not([role="button"]):visited { color:var(--accent-dark); text-decoration-color:currentColor; text-decoration-thickness:.08em; } a:hover,a:not([role="button"]):hover,a:active,a:not([role="button"]):active { color:#033d2a; text-decoration-color:currentColor; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:3px solid var(--focus); outline-offset:3px; } input,select,textarea { background-color:var(--surface)!important; color:var(--ink)!important; border-color:#8ca59a!important; } input::placeholder,textarea::placeholder { color:#5c7167!important; opacity:1; } article,aside { color:var(--ink); } .container { width:min(1120px,calc(100% - 2rem)); margin-inline:auto; } .site-header { background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:2; } .site-header nav { min-height:4.25rem; display:flex; align-items:center; gap:1rem; justify-content:space-between; } .brand { text-decoration:none; color:var(--ink); font-weight:800; letter-spacing:-.04em; font-size:1.15rem; } .brand span,.eyebrow { color:var(--accent-dark); } .site-header ul { display:flex; list-style:none; padding:0; gap:1rem; margin:0; } .site-header a { text-decoration:none; } .menu-toggle { display:none; } main { padding-block:3rem 4rem; } h1 { font-size:clamp(2.15rem,6vw,4.3rem); line-height:1.03; letter-spacing:-.055em; max-width:15ch; margin:.25rem 0 1rem; color:var(--ink); } h2,h3 { color:var(--ink); letter-spacing:-.03em; } .hero { padding:clamp(2rem,6vw,5rem); background:linear-gradient(135deg,#e7f4ed,#ffffff); border-radius:var(--radius); border:1px solid var(--line); } .hero > p { font-size:1.1rem; max-width:62ch; color:var(--muted); } .eyebrow { text-transform:uppercase; letter-spacing:.1em; font-size:.73rem; font-weight:750; margin-bottom:.4rem; } label { color:var(--ink); font-weight:700; } .search-row { display:flex; gap:.6rem; margin-top:.35rem; } input[type="search"] { flex:1; min-width:0; padding:.8rem 1rem; border-radius:.6rem; font:inherit; } button,[role="button"] { background:var(--accent); color:#fff; border:0; border-radius:.6rem; padding:.8rem 1.1rem; font:inherit; font-weight:700; text-decoration:none; cursor:pointer; } button:hover,[role="button"]:hover { background:var(--accent-dark); color:#fff; } section { margin-top:3.5rem; } .cards { display:grid; gap:1rem; } .cards.four { grid-template-columns:repeat(4,1fr); } .cards.three { grid-template-columns:repeat(3,1fr); } .card,.content-card { display:block; padding:1.25rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); text-decoration:none; color:var(--ink); } .card:hover,.content-card:hover { border-color:#6e9d89; } .card strong { display:block; color:var(--accent-dark); font-size:2rem; letter-spacing:-.06em; } .content-card h2,.content-card h3 { margin:.2rem 0 .5rem; line-height:1.18; } .content-card h2 { font-size:1.25rem; } .content-card h3 { font-size:1.15rem; } .content-card p,.content-card small { color:var(--muted); } .section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; } .page-heading { border-bottom:1px solid var(--line); margin-bottom:2rem; } .page-heading h1 { font-size:clamp(2.1rem,5vw,3.6rem); } .filters { background:var(--surface); padding:1rem; border:1px solid var(--line); border-radius:var(--radius); margin-bottom:1.5rem; } .detail { max-width:800px; background:var(--surface); padding:clamp(1.25rem,4vw,3rem); border:1px solid var(--line); border-radius:var(--radius); } .detail h1 { max-width:none; font-size:clamp(2rem,5vw,3.5rem); } dl { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; border-top:1px solid var(--line); padding-top:1rem; } dt { color:var(--muted); font-size:.85rem; } dd { color:var(--ink); margin:.2rem 0 0; font-weight:650; } .official-link { display:inline-block; margin-top:1.25rem; font-weight:700; } .pagination { display:flex; justify-content:space-between; align-items:center; margin-top:2rem; } .site-footer { padding:2rem 0; border-top:1px solid var(--line); color:var(--muted); } .empty-state { max-width:40rem; text-align:center; margin-inline:auto; }
@media (max-width:700px) { .menu-toggle { display:inline-block; padding:.45rem .65rem; font-size:.9rem; } .site-header ul { display:none; position:absolute; left:1rem; right:1rem; top:4.1rem; padding:1rem; background:var(--surface); border:1px solid var(--line); border-radius:.75rem; flex-direction:column; box-shadow:0 .75rem 2rem rgba(20,35,30,.12); } .site-header ul.is-open { display:flex; } .cards.four,.cards.three { grid-template-columns:1fr; } .search-row { flex-direction:column; } dl { grid-template-columns:1fr; } }
.loading-state { color:var(--ink); padding:.75rem 1rem; border-left:4px solid var(--accent); background:var(--soft); }
.filter-grid { display:grid; grid-template-columns:2fr 1fr; gap:1rem; margin-bottom:1rem; } select { width:100%; padding:.8rem; border-radius:.6rem; font:inherit; } .metadata { margin-top:2rem; } .metadata dl { grid-template-columns:repeat(2,minmax(0,1fr)); } .pills { display:flex; flex-wrap:wrap; gap:.5rem; } .pills a { color:var(--accent-dark); padding:.25rem .6rem; border-radius:999px; background:var(--soft); text-decoration:none; font-size:.85rem; font-weight:650; } .pills a:hover { background:var(--soft-strong); }
.prose { max-width:850px; margin-inline:auto; } .prose h1 { max-width:16ch; } .prose h2 { margin-top:2rem; } .editorial-note { color:var(--ink); margin-top:2rem; padding:1rem; background:var(--soft); border:1px solid var(--line); border-radius:.75rem; }
@media (prefers-reduced-motion:no-preference) { .card,.content-card { transition:transform .16s ease,border-color .16s ease; } }

/* La cabecera de las fichas no hereda el encabezado oscuro de Pico. */
.detail > header {
  background:var(--soft)!important;
  border-bottom:1px solid var(--line)!important;
  border-radius:calc(var(--radius) - .2rem) calc(var(--radius) - .2rem) 0 0;
  color:var(--ink)!important;
}

.detail > header h1,
.detail > header p,
.detail > header .eyebrow {
  color:var(--ink)!important;
}

.detail > header .eyebrow {
  color:var(--accent-dark)!important;
}

/* Pico aplica variantes específicas a submit: se fuerzan los colores de marca. */
button,
button[type="submit"],
input[type="submit"],
[role="button"] {
  background-color:var(--accent)!important;
  border-color:var(--accent)!important;
  color:#fff!important;
}

button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
[role="button"]:hover {
  background-color:var(--accent-dark)!important;
  border-color:var(--accent-dark)!important;
  color:#fff!important;
}

/* El buscador principal separa la etiqueta de sus controles. */
.hero form[role="search"] > label {
  display:block;
  margin-bottom:0;
}

.hero form[role="search"] {
  display:block;
  width:100%;
}

.hero form[role="search"] .search-row {
  display:flex;
  margin-top:1.75rem;
  width:100%;
}

.hero form[role="search"] .search-row input {
  flex:1 1 auto;
}

.hero form[role="search"] .search-row button {
  flex:0 0 auto;
}

.card-image-link {
  display:block;
  margin:-1.25rem -1.25rem 1rem;
  border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
  overflow:hidden;
}

.card-image {
  display:block;
  width:100%;
  aspect-ratio:16 / 9;
  object-fit:cover;
  background:#e7f4ed;
}

.detail-image {
  margin:0 0 1.5rem;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:calc(var(--radius) - .25rem);
  background:#e7f4ed;
}

.detail-image img {
  display:block;
  width:100%;
  aspect-ratio:16 / 9;
  object-fit:cover;
}