:root {
  color-scheme: light;
  --fic-cian:#3eb1c8; --fic-cian-oscuro:#1a869b;
  --fic-coral:#ff585d; --fic-amarillo:#f2c75c;
  --tinta:#171717; --texto:#425156; --muted:#6a787c;
  --papel:#fff; --fondo:#f7fafb; --suave:#f2f6f7; --linea:#dce5e8;
  --sombra:0 12px 34px rgba(24,56,66,.09);
  --sombra-suave:0 7px 22px rgba(24,56,66,.065);
  --radio:20px; --ancho:1100px;
}
*{box-sizing:border-box}
html{min-width:320px;scroll-behavior:smooth;background:var(--fondo)}
body{
  margin:0;min-height:100vh;color:var(--texto);
  background:linear-gradient(135deg,#fff 0%,#f8fbfc 100%);
  font-family:"Segoe UI",Inter,Helvetica,Arial,sans-serif;line-height:1.65
}
img{max-width:100%} button,input{font:inherit}
a{color:var(--fic-cian-oscuro);text-underline-offset:.18em}
a:hover{color:#116f80}
:focus-visible{outline:3px solid rgba(242,199,92,.9);outline-offset:3px}
.skip-link{
  position:fixed;top:.7rem;left:.7rem;z-index:100;padding:.7rem 1rem;
  color:var(--tinta);background:var(--fic-amarillo);border-radius:10px;
  transform:translateY(-180%)
}
.skip-link:focus{transform:translateY(0)}
.color-line{display:grid;grid-template-columns:46% 31% 23%;height:9px}
.color-line span:nth-child(1){background:var(--fic-cian)}
.color-line span:nth-child(2){background:var(--fic-coral)}
.color-line span:nth-child(3){background:var(--fic-amarillo)}

/* Cabecera */
.site-header{background:rgba(255,255,255,.94)}
.header-inner{
  width:min(calc(100% - 2.5rem),1260px);min-height:94px;margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  border-bottom:1px solid var(--linea)
}
.site-brand{display:inline-flex;align-items:center;flex:0 0 auto;text-decoration:none}
.site-brand img{display:block;width:268px;height:auto}
.site-nav{display:flex;align-items:center;gap:.65rem}
.site-nav a{
  display:inline-flex;align-items:center;justify-content:center;min-width:96px;
  min-height:44px;padding:.55rem 1rem;color:#344449;background:var(--suave);
  border:1px solid var(--linea);border-radius:14px;font-size:.9rem;
  font-weight:650;text-decoration:none;
  transition:transform .16s ease,border-color .16s ease,background .16s ease
}
.site-nav a:hover,.site-nav a[aria-current="page"]{
  color:#26383d;background:#e8f5f7;border-color:rgba(62,177,200,.55);
  transform:translateY(-1px)
}
.page-shell,.article-shell{
  width:min(var(--ancho),calc(100% - 2.5rem));margin-inline:auto;
  padding-block:clamp(2.3rem,5vw,4.25rem)
}

/* Pie */
.site-footer{
  width:min(calc(100% - 2.5rem),1260px);margin:auto auto 0;
  padding:1.2rem 0 1.65rem;border-top:1px solid var(--linea);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  color:var(--muted);font-size:.88rem
}
.site-footer p{margin:0}.footer-name{font-weight:700}
.footer-credit{display:flex;align-items:center;justify-content:flex-end;gap:.8rem}
.footer-credit span{white-space:nowrap}
.footer-credit a{display:inline-flex;align-items:center;text-decoration:none}
.footer-credit img{display:block;width:68px;height:auto}

/* Portada */
.home-page{display:grid;min-height:100vh;grid-template-rows:auto 1fr auto}
.home-main{
  position:relative;overflow:hidden;display:grid;place-items:center;
  padding:clamp(3.5rem,11vh,8rem) 1.25rem
}
.home-main::before,.home-main::after{
  content:"";position:absolute;z-index:0;border-radius:999px;
  filter:blur(45px);pointer-events:none
}
.home-main::before{
  width:clamp(190px,25vw,360px);height:clamp(190px,25vw,360px);
  top:5%;left:-8%;background:rgba(62,177,200,.09)
}
.home-main::after{
  width:clamp(210px,27vw,390px);height:clamp(210px,27vw,390px);
  right:-10%;bottom:1%;background:rgba(242,199,92,.12)
}
.search-home{position:relative;z-index:1;width:min(930px,100%);text-align:center}
.home-logo{display:block;width:min(520px,86vw);height:auto;margin:0 auto 1.8rem}
.home-kicker{display:none}
.home-intro{
  max-width:750px;margin:0 auto 2.55rem;color:#56666b;
  font-size:clamp(1rem,2vw,1.2rem)
}

/* Buscadores */
.search-panel,.results-search{margin:0}
.search-row{
  display:flex;align-items:center;gap:.75rem;padding:.62rem .7rem .62rem 1.15rem;
  background:var(--papel);border:1px solid var(--linea);border-radius:24px;
  box-shadow:var(--sombra)
}
.search-icon{position:relative;flex:0 0 25px;width:25px;height:25px;color:#6d7a7e}
.search-icon::before{
  content:"";position:absolute;width:14px;height:14px;top:1px;left:1px;
  border:2px solid currentColor;border-radius:50%
}
.search-icon::after{
  content:"";position:absolute;width:10px;height:2px;top:17px;left:16px;
  border-radius:99px;background:currentColor;transform:rotate(45deg);
  transform-origin:left center
}
input[type="text"]{
  min-width:0;flex:1;min-height:48px;padding:.72rem .35rem;color:var(--tinta);
  background:transparent;border:0;outline:none;font-size:1rem
}
input[type="text"]::placeholder{color:#7a878b}
input[type="checkbox"],input[type="radio"]{accent-color:var(--fic-cian)}
.primary-button,button.primary-button{
  flex:0 0 auto;min-width:145px;min-height:54px;padding:.75rem 1.4rem;
  color:#fff;background:var(--fic-cian);border:0;border-radius:17px;
  font-weight:750;cursor:pointer;
  transition:transform .16s ease,background .16s ease,box-shadow .16s ease
}
.primary-button:hover,button.primary-button:hover{
  background:var(--fic-cian-oscuro);box-shadow:0 6px 16px rgba(26,134,155,.2);
  transform:translateY(-1px)
}
.search-tools{
  display:flex;justify-content:center;flex-wrap:wrap;gap:.75rem;margin-top:1.45rem
}
.text-button,button.text-button,.help-link{
  display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
  min-height:48px;padding:.65rem 1.1rem;color:#29383c;background:var(--suave);
  border:1px solid var(--linea);border-radius:16px;font-size:.9rem;
  font-weight:650;text-decoration:none;cursor:pointer;
  transition:transform .16s ease,background .16s ease,border-color .16s ease
}
.text-button:hover,button.text-button:hover,.help-link:hover{
  color:#29383c;background:#e9f4f6;border-color:rgba(62,177,200,.48);
  transform:translateY(-1px)
}
.tool-icon{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;flex:0 0 22px;border:1.7px solid #4d5b5f;
  border-radius:50%;font-size:.78rem;font-weight:800;line-height:1
}
.tool-icon.filter{border:0;border-radius:0}
.tool-icon.filter::before,.tool-icon.filter::after{
  content:"";position:absolute;left:1px;width:20px;height:2px;
  background:#4d5b5f;border-radius:9px
}
.tool-icon.filter::before{top:6px}.tool-icon.filter::after{bottom:6px}
.adv{
  display:none;max-width:780px;margin:1rem auto 0;padding:1.2rem 1.35rem;
  background:rgba(255,255,255,.97);border:1px solid var(--linea);
  border-radius:18px;box-shadow:var(--sombra-suave);text-align:left
}
.adv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
fieldset{min-width:0;margin:0;padding:0;border:0}
legend{margin-bottom:.55rem;color:var(--tinta);font-weight:750}
label{display:block;margin:.42rem 0}

/* Resultados */
.results-page{min-height:100vh}
.page-heading{margin-bottom:1.6rem}
.page-heading h1,.article-title,.help-intro h1{
  margin:0;color:var(--tinta);font-size:clamp(2.2rem,5vw,3.65rem);
  font-weight:760;letter-spacing:-.045em;line-height:1.04
}
.page-heading p{margin:.55rem 0 0;color:var(--muted)}
.results-search{margin-bottom:1.4rem}
.results-search .search-tools{justify-content:flex-start;margin-top:1rem}
.results-search .adv{margin-left:0}
.result-count,.empty-state{margin:0 0 1.2rem;color:var(--muted)}
.result-count strong,.empty-state strong,.result strong{
  padding:.05rem .18rem;color:var(--tinta);
  background:rgba(242,199,92,.42);border-radius:4px
}
.results-list{display:grid;gap:1rem}
.result{
  position:relative;padding:1.5rem 1.7rem;background:rgba(255,255,255,.98);
  border:1px solid #e0e7e9;border-radius:18px;box-shadow:var(--sombra-suave);
  transition:transform .16s ease,box-shadow .16s ease
}
.result:hover{transform:translateY(-2px);box-shadow:var(--sombra)}
.result h2{margin:0 0 .55rem;font-size:clamp(1.28rem,2.4vw,1.55rem);line-height:1.2}
.result h2 a{color:var(--fic-cian-oscuro);text-decoration:none}
.result h2 a:hover{color:#116f80;text-decoration:underline}
.result p{max-width:900px;margin:.4rem 0}
.result-bottom{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:1rem;margin-top:1rem
}
.result-meta{display:flex;flex-wrap:wrap;gap:.45rem;margin:0}
.resource-link{
  flex:0 0 auto;color:var(--fic-cian-oscuro);font-size:.88rem;
  font-weight:750;text-decoration:none;white-space:nowrap
}
.resource-link:hover{text-decoration:underline}

/* Etiquetas */
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{
  display:inline-flex;align-items:center;min-height:30px;padding:.3rem .7rem;
  color:#287a8a;background:#e7f6f8;border:1px solid transparent;
  border-radius:10px;font-size:.78rem;font-weight:650;text-decoration:none;
  transition:transform .14s ease,border-color .14s ease
}
.chip:nth-child(3n + 2){color:#a53b40;background:#fff0f0}
.chip:nth-child(3n + 3){color:#806416;background:#fff7d9}
.chip:hover{color:var(--tinta);border-color:currentColor;transform:translateY(-1px)}

/* Visor */
.article-shell{width:min(1120px,calc(100% - 2.5rem))}
.article-head{margin-bottom:1.7rem}
.article-kicker{
  margin:0 0 .85rem;color:var(--muted);font-size:.78rem;
  font-weight:700;letter-spacing:.04em
}
.summary-panel{
  position:relative;overflow:hidden;margin:0 0 2.3rem;
  padding:1.55rem 1.9rem 1.45rem 2.5rem;background:var(--papel);
  border:1px solid var(--linea);border-radius:var(--radio);box-shadow:var(--sombra-suave)
}
.summary-panel::before{
  content:"";position:absolute;inset:0 auto 0 0;width:9px;background:var(--fic-cian)
}
.panel-title,.meta-title{
  margin:0 0 .8rem;color:#27879a;font-size:.76rem;font-weight:760;
  letter-spacing:.12em;text-transform:uppercase
}
.summary-panel .body p{
  margin:0;color:#3f4e52;font-size:clamp(1rem,2vw,1.1rem)
}
.article-layout{
  display:grid;grid-template-columns:minmax(0,1fr) 320px;
  gap:clamp(2rem,5vw,4rem);align-items:start
}
.article-content>h2{
  margin:0 0 1.2rem;padding-bottom:.8rem;color:var(--tinta);
  border-bottom:1px solid var(--linea);font-size:1.75rem;line-height:1.2
}
.section-block+.section-block{margin-top:2rem}
.section-block h3,.body h3{
  margin:0 0 .55rem;color:#26363a;font-size:1.24rem;line-height:1.3
}
.section-block p,.body p{margin:.65rem 0 1rem}
.article-sidebar{position:sticky;top:1.5rem;display:grid;gap:1rem}
.side-card{
  padding:1.4rem;background:rgba(255,255,255,.98);
  border:1px solid var(--linea);border-radius:18px;box-shadow:var(--sombra-suave)
}
.side-card .chips{margin-top:.25rem}
.side-note{margin:.85rem 0 0;color:var(--muted);font-size:.82rem}
.resource-data{display:grid;gap:.7rem;margin:0}
.resource-data div{display:grid;grid-template-columns:76px minmax(0,1fr);gap:.45rem}
.resource-data dt{color:var(--muted)}
.resource-data dd{margin:0;color:#27383c;font-weight:650;overflow-wrap:anywhere}
.source-link{
  display:inline-flex;margin-top:1rem;font-size:.86rem;
  font-weight:750;text-decoration:none
}
.images-section{margin-top:2.1rem}
.images-section>h2{margin:0 0 1rem;color:var(--tinta);font-size:1.45rem}
.imgs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
figure{
  margin:0;overflow:hidden;background:var(--papel);
  border:1px solid var(--linea);border-radius:17px
}
figure img{display:block;width:100%;height:auto}
figcaption{
  padding:.8rem .95rem;color:var(--muted);
  border-top:1px solid var(--linea);font-size:.82rem
}
.back{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:.6rem 1rem;color:#344449;background:var(--suave);
  border:1px solid var(--linea);border-radius:14px;font-size:.9rem;
  font-weight:650;text-decoration:none
}
.back:hover{color:#26383d;background:#e9f4f6}
.page-shell>.back{margin-top:1.5rem}

/* Ayuda */
.help-layout{
  display:grid;grid-template-columns:minmax(250px,.65fr) minmax(0,1.35fr);
  gap:clamp(2.2rem,6vw,5rem);align-items:start
}
.help-intro{position:sticky;top:1.5rem}
.help-intro p:not(.article-kicker){margin:1.15rem 0 0;font-size:1.04rem}
.help-intro .back{margin-top:1.3rem}
.help-sections{counter-reset:help}
.help-card{
  counter-increment:help;margin-bottom:1rem;padding:1.45rem 1.55rem;
  background:rgba(255,255,255,.98);border:1px solid var(--linea);
  border-radius:18px;box-shadow:var(--sombra-suave)
}
.help-card h2{
  display:flex;align-items:baseline;gap:.7rem;margin:0 0 .6rem;
  color:var(--tinta);font-size:1.28rem
}
.help-card h2::before{
  content:counter(help,decimal-leading-zero);color:var(--fic-cian-oscuro);
  font-size:.74rem;letter-spacing:.08em
}
.help-card p,.help-card ul{margin:.55rem 0}
.help-card li+li{margin-top:.38rem}
.example{
  margin-top:.9rem!important;padding:.85rem 1rem;background:#fff8df;
  border-left:5px solid var(--fic-amarillo);border-radius:0 10px 10px 0
}
.muted{color:var(--muted)}

@media(max-width:850px){
  .article-layout,.help-layout{grid-template-columns:1fr}
  .article-sidebar,.help-intro{position:static}
  .article-sidebar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .article-sidebar .back{grid-column:1/-1;justify-self:start}
}
@media(max-width:650px){
  .header-inner,.page-shell,.article-shell,.site-footer{
    width:min(100% - 1.35rem,var(--ancho))
  }
  .header-inner{min-height:82px;gap:.7rem}
  .site-brand img{width:190px}
  .site-nav{gap:.35rem}
  .site-nav a{min-width:70px;min-height:40px;padding-inline:.7rem}
  .home-main{padding-block:3.5rem}
  .home-logo{width:min(410px,90vw);margin-bottom:1.2rem}
  .home-intro{margin-bottom:1.7rem}
  .search-row{padding:.5rem;border-radius:19px}
  .search-icon{display:none}
  input[type="text"]{padding-left:.65rem}
  .primary-button,button.primary-button{min-width:105px}
  .search-tools{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem
  }
  .text-button,button.text-button,.help-link{
    padding-inline:.7rem;font-size:.82rem
  }
  .adv-grid,.article-sidebar,.imgs{grid-template-columns:1fr}
  .result{padding:1.25rem}
  .result-bottom{align-items:flex-start;flex-direction:column}
  .site-footer{align-items:flex-start;flex-direction:column;gap:.7rem}
  .footer-credit{justify-content:flex-start}
}
@media(max-width:420px){
  .header-inner{align-items:flex-start;flex-direction:column;padding-block:.75rem}
  .site-nav{width:100%}.site-nav a{flex:1}
  .search-row{flex-wrap:wrap}
  .search-row input{flex-basis:calc(100% - .5rem)}
  .primary-button,button.primary-button{width:100%}
  .search-tools{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important}
}
