/* AyudasFácil · diseño cercano: Nunito, azul cobalto con amarillo sol, formas redondeadas y color suave por tema.
   Tipografía alojada en local (sin Google Fonts). */
@font-face{font-family:"Nunito";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/nunito-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/nunito-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/nunito-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:800;font-style:normal;font-display:swap;src:url(../fonts/nunito-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:900;font-style:normal;font-display:swap;src:url(../fonts/nunito-latin-900-normal.woff2) format("woff2")}

:root{
  --ink:#14214a;--text:#364062;--muted:#6a7392;--bg:#fff;--soft:#f4f7fe;--line:#e5e9f4;
  --blue:#2748e8;--blue-d:#1b36b8;--sun:#ffc83d;--sun-soft:#fff4cf;
  --t:#e4edff;--a:#2748e8;
  --font:"Nunito",ui-rounded,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --r:22px;--r-lg:32px;
  --sh:0 1px 2px rgba(20,33,74,.05),0 8px 24px -12px rgba(20,33,74,.18);
  --sh-up:0 2px 4px rgba(20,33,74,.05),0 22px 40px -18px rgba(39,72,232,.35);
  --ease:cubic-bezier(.22,.8,.3,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:400 1.125rem/1.72 var(--font);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
img{height:auto;display:block}
a{color:var(--blue);text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:rgba(39,72,232,.25);transition:color .2s,text-decoration-color .2s,background-color .2s,transform .25s var(--ease),box-shadow .25s var(--ease)}
a:hover{color:var(--blue-d);text-decoration-color:currentColor}
h1,h2,h3,h4{font-family:var(--font);color:var(--ink);font-weight:800;line-height:1.12;letter-spacing:-.015em;margin:0 0 .5em;text-wrap:balance}
h1{font-weight:900;font-size:clamp(2.3rem,6vw,4rem);letter-spacing:-.025em}
h2{font-size:clamp(1.6rem,3.4vw,2.2rem)}
h3{font-size:1.25rem}
.wrap{max-width:1180px;margin:0 auto;padding-inline:max(20px,env(safe-area-inset-left,0px)) max(20px,env(safe-area-inset-right,0px))}
.narrow{max-width:780px}
.muted{color:var(--muted)}.small{font-size:.92rem}
.mark{background:linear-gradient(transparent 58%,var(--sun) 58% 90%,transparent 90%);padding:0 .08em;border-radius:3px}
.progress{position:fixed;top:0;left:0;height:4px;width:0;background:var(--sun);z-index:100;border-radius:0 4px 4px 0}
.ico{flex:none}

/* Cabecera */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:saturate(1.5) blur(14px);-webkit-backdrop-filter:saturate(1.5) blur(14px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:14px}
.brand{font:900 1.65rem/1 var(--font);letter-spacing:-.03em;color:var(--ink);text-decoration:none;position:relative;display:inline-block;padding-bottom:7px;isolation:isolate}
.brand::after{content:"";position:absolute;left:44%;right:0;bottom:0;height:7px;background:var(--sun);border-radius:99px;transform:rotate(-1.2deg);z-index:-1;transition:left .3s var(--ease)}
.brand:hover{color:var(--ink)}.brand:hover::after{left:0}
.find{display:flex;align-items:center;gap:6px;background:var(--soft);border:2px solid transparent;border-radius:99px;padding:4px 4px 4px 18px;min-width:min(340px,100%);transition:border-color .2s,background .2s,box-shadow .25s}
.find:focus-within{background:#fff;border-color:var(--blue);box-shadow:0 10px 24px -14px rgba(39,72,232,.6)}
.find input{flex:1;min-width:0;border:0;background:none;font:600 1rem var(--font);color:var(--ink);outline:0;padding:8px 0}
.find input::placeholder{color:#8b94b2;font-weight:600}
.find button{border:0;cursor:pointer;background:var(--blue);color:#fff;font:800 .92rem var(--font);border-radius:99px;padding:9px 18px;transition:background .2s,transform .2s}
.find button:hover{background:var(--blue-d)}.find button:active{transform:scale(.96)}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:2px 0 14px}
@media(max-width:820px){.chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:4px 24px 14px 2px;margin-right:-16px;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;gap:7px;font:700 .9rem/1 var(--font);color:var(--ink);background:var(--t);border-radius:99px;padding:9px 14px 9px 10px;text-decoration:none;border:2px solid transparent;transition:transform .2s var(--ease),border-color .2s,background .2s}
.chip .ico{color:var(--a)}
.chip:hover,.chip.on{color:var(--ink);border-color:var(--a);transform:translateY(-1px)}
main{animation:in .45s var(--ease)}
@keyframes in{from{opacity:.001;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Botones */
.btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;font:800 1rem var(--font);color:#fff;background:var(--blue);padding:14px 26px;border-radius:99px;text-decoration:none;box-shadow:0 12px 22px -12px rgba(39,72,232,.75);transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s}
.btn:hover{background:var(--blue-d);color:#fff;transform:translateY(-2px);box-shadow:0 18px 28px -14px rgba(39,72,232,.8)}
.btn:active{transform:scale(.97)}
.btn.ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line)}
.btn.ghost:hover{background:var(--soft);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn.sun{background:var(--sun);color:var(--ink);box-shadow:0 12px 22px -12px rgba(184,130,0,.7)}
.btn.sun:hover{background:#ffd25e;color:var(--ink)}

/* Portada */
.hero{background:var(--soft);border-radius:0 0 var(--r-lg) var(--r-lg)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,72px);align-items:center;padding-block:56px 64px}
.pill{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--ink);font:800 .85rem var(--font);border-radius:99px;padding:7px 14px;box-shadow:var(--sh);margin-bottom:20px}
.pill i{width:9px;height:9px;border-radius:50%;background:var(--sun);display:inline-block}
.hero h1{margin-bottom:18px}
.hero .lead{font-size:1.25rem;color:var(--text);max-width:34em;margin:0 0 26px}
.hero .find{background:#fff;box-shadow:var(--sh);padding:6px 6px 6px 22px;max-width:560px}
.hero .find input{font-size:1.08rem}
.hero .find button{padding:13px 24px;font-size:1rem}
.hot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:18px;font-weight:700;font-size:.95rem;color:var(--muted)}
.hot a{background:#fff;border-radius:99px;padding:6px 14px;color:var(--ink);text-decoration:none;font-weight:800;box-shadow:0 1px 0 var(--line);border:1.5px solid var(--line)}
.hot a:hover{border-color:var(--blue);color:var(--blue)}
.notes{display:grid;gap:14px;justify-items:start}
.note{display:flex;gap:14px;align-items:center;width:min(100%,380px);background:#fff;border-radius:var(--r);padding:16px 18px;box-shadow:var(--sh);text-decoration:none;color:var(--ink);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.note:nth-child(1){transform:rotate(-2deg)}
.note:nth-child(2){transform:rotate(1.4deg) translateX(34px)}
.note:nth-child(3){transform:rotate(-1deg) translateX(8px)}
.note:hover{transform:rotate(0) translateY(-4px);box-shadow:var(--sh-up);color:var(--ink)}
.note .badge{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--t);color:var(--a);flex:none}
.note b{display:block;font-weight:800;line-height:1.25;font-size:1.02rem}
.note small{color:var(--muted);font-weight:700;font-size:.82rem}
.notes-h{font:800 .8rem var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 4px}

.block{padding-block:60px}
.sec-h{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.sec-h h2{margin:0}
.sec-h p{margin:6px 0 0;color:var(--muted)}
.link-all{font-weight:800;text-decoration:none;white-space:nowrap}
.link-all:hover{text-decoration:underline}

/* Temas */
.topics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.topic{display:flex;flex-direction:column;gap:6px;background:var(--t);border-radius:var(--r);padding:24px;text-decoration:none;color:var(--ink);position:relative;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.topic:hover{transform:translateY(-6px);box-shadow:0 22px 36px -22px var(--a);color:var(--ink)}
.topic .badge{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:#fff;color:var(--a);margin-bottom:10px;transition:transform .35s var(--ease)}
.topic:hover .badge{transform:rotate(-6deg) scale(1.06)}
.topic strong{font:900 1.3rem/1.2 var(--font);letter-spacing:-.01em}
.topic span.d{font-weight:600;font-size:.98rem;line-height:1.5;color:var(--text)}
.topic .n{margin-top:10px;font:800 .85rem var(--font);color:var(--a);display:inline-flex;align-items:center;gap:6px}
.topic .n::after{content:"→";transition:transform .25s var(--ease)}
.topic:hover .n::after{transform:translateX(5px)}

/* Destacado */
.feature{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:32px;align-items:center;background:var(--sun-soft);border-radius:var(--r-lg);padding:clamp(28px,5vw,56px)}
.feature .tagline{font:800 .85rem var(--font);letter-spacing:.06em;text-transform:uppercase;color:#8a6100}
.feature h2{font-size:clamp(1.7rem,4vw,2.6rem);margin:8px 0 12px}
.feature h2 a{color:var(--ink);text-decoration:none}
.feature p{margin:0 0 22px;font-size:1.15rem}
.feature .big-ico{display:grid;place-items:center;aspect-ratio:1;max-width:260px;justify-self:center;width:100%;background:#fff;border-radius:50%;color:var(--a);box-shadow:var(--sh);transform:rotate(-4deg)}
.feature .big-ico svg{width:46%;height:46%;stroke-width:1.4}

/* Tarjetas */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.card{position:relative;display:flex;flex-direction:column;gap:12px;background:#fff;border:2px solid var(--line);border-radius:var(--r);padding:22px;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .25s}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh-up);border-color:var(--a)}
.card .top{display:flex;align-items:center;gap:10px;font:800 .85rem var(--font);color:var(--a)}
.card .top .badge{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--t)}
.card h3{margin:0;font-size:1.28rem;line-height:1.22}
.card h3 a{color:var(--ink);text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.card p{margin:0;color:var(--text);font-size:1rem;line-height:1.55;flex:1}
.card .foot{display:flex;justify-content:space-between;align-items:center;font:700 .86rem var(--font);color:var(--muted)}
.card .foot b{color:var(--a);font-weight:800}
.card .foot b::after{content:" →"}
.thumb{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:16px;background:var(--t)}

/* Páginas interiores */
.page-head{background:var(--t);border-radius:0 0 var(--r-lg) var(--r-lg);padding-block:36px 40px;margin-bottom:0}
.page-head h1{display:flex;align-items:center;gap:16px;margin:12px 0 10px;font-size:clamp(2rem,5vw,3.2rem)}
.page-head h1 .badge{display:grid;place-items:center;width:64px;height:64px;border-radius:20px;background:#fff;color:var(--a);flex:none}
.page-head .stand{font-size:1.2rem;margin:0;max-width:40em}
.crumbs{display:flex;flex-wrap:wrap;gap:4px 8px;font-weight:700;font-size:.9rem;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none}.crumbs a:hover{color:var(--ink)}
.pager{display:flex;gap:8px;margin-top:34px}
.pager a{min-width:46px;height:46px;display:grid;place-items:center;border-radius:99px;background:var(--soft);color:var(--ink);font-weight:800;text-decoration:none}
.pager a:hover{background:var(--t)}.pager a.on{background:var(--blue);color:#fff}

/* Artículo */
.art-top{background:var(--t);border-radius:0 0 var(--r-lg) var(--r-lg);padding-block:30px 44px}
.art-top h1{max-width:19em;margin:16px 0 14px;font-size:clamp(2.1rem,5vw,3.4rem)}
.art-top .stand{font-size:1.25rem;max-width:36em;margin:0 0 20px}
.tag{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--a);font:800 .88rem var(--font);border-radius:99px;padding:7px 14px 7px 9px;text-decoration:none}
.tag:hover{color:var(--a);transform:translateY(-1px)}
.facts{display:flex;flex-wrap:wrap;gap:8px}
.facts span{background:rgba(255,255,255,.7);border-radius:99px;padding:6px 14px;font:700 .88rem var(--font);color:var(--ink)}
.art-fig{margin:28px 0 0}
.art-fig img{width:100%;max-height:520px;object-fit:cover;border-radius:var(--r-lg)}
.art-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(28px,5vw,64px);padding-block:48px 24px;align-items:start}
.prose{min-width:0;max-width:740px;font-size:1.14rem}
.prose>*:first-child{margin-top:0}
.prose h2{margin:2.1em 0 .6em;scroll-margin-top:100px;font-size:clamp(1.55rem,3vw,2rem)}
.prose h3{margin:1.6em 0 .4em;scroll-margin-top:100px}
.prose p,.prose ul,.prose ol{margin:0 0 1.2em}
.prose strong{color:var(--ink);font-weight:800}
.prose ul{list-style:none;padding:0}
.prose ul>li{position:relative;padding-left:1.7em;margin-bottom:.6em}
.prose ul>li::before{content:"";position:absolute;left:.2em;top:.62em;width:.62em;height:.62em;border-radius:50%;background:var(--sun);box-shadow:0 0 0 3px var(--sun-soft)}
.prose ol{list-style:none;padding:0;counter-reset:n}
.prose ol>li{counter-increment:n;position:relative;padding-left:2.8rem;margin-bottom:.9em;min-height:2rem}
.prose ol>li::before{content:counter(n);position:absolute;left:0;top:.08em;width:2rem;height:2rem;border-radius:50%;background:var(--blue);color:#fff;font:900 .95rem/2rem var(--font);text-align:center}
.prose a{font-weight:700}
.prose blockquote{margin:1.9em 0;padding:20px 24px 8px;background:var(--sun-soft);border-radius:var(--r);color:var(--ink)}
.prose blockquote::before{content:"Ten en cuenta";display:block;font:900 .8rem var(--font);letter-spacing:.08em;text-transform:uppercase;color:#8a6100;margin-bottom:6px}
.prose blockquote p:last-child{margin-bottom:12px}
.table-wrap{overflow-x:auto;margin:1.6em 0;border-radius:var(--r);border:2px solid var(--line)}
.prose table{width:100%;border-collapse:collapse;font-size:1rem;min-width:420px}
.prose th,.prose td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line)}
.prose th{background:var(--soft);font-weight:800;color:var(--ink)}
.prose tr:last-child td{border-bottom:0}
.disclaimer{margin-top:2.4em;padding:16px 20px;background:var(--soft);border-radius:var(--r);font-size:.95rem;color:var(--muted)}
.affbox{margin:2em 0;padding:22px 24px;background:#fff;border:2px dashed var(--blue);border-radius:var(--r)}
.affbox strong{display:block;margin-bottom:6px}
.aside{position:sticky;top:112px;display:grid;gap:18px}
.toc{background:var(--soft);border-radius:var(--r);padding:22px}
.toc strong{display:block;font:900 1.05rem var(--font);color:var(--ink);margin-bottom:10px}
.toc ol{margin:0;padding:0;list-style:none;display:grid;gap:2px}
.toc a{display:block;padding:9px 12px;border-radius:12px;color:var(--text);font-weight:700;font-size:.97rem;line-height:1.35;text-decoration:none}
.toc a:hover{background:#fff;color:var(--blue)}
.more-reading{padding-block:24px 70px}

/* Anuncios */
.ad{margin:30px auto;max-width:100%;min-height:90px;text-align:center;background:var(--soft);border-radius:var(--r);padding:10px}
.ad small{display:block;font:700 .7rem var(--font);letter-spacing:.1em;text-transform:uppercase;color:#98a0bb;margin-bottom:6px}

/* Formularios y avisos */
.form{display:grid;gap:18px;background:#fff;padding:30px;border-radius:var(--r-lg);box-shadow:var(--sh);border:2px solid var(--line);max-width:660px}
.form label{display:grid;gap:7px;font-weight:800;color:var(--ink);font-size:.98rem}
.form input,.form textarea{font:600 1rem var(--font);padding:13px 16px;border:2px solid var(--line);border-radius:16px;background:var(--soft);color:var(--ink);transition:border-color .2s,box-shadow .25s,background .2s}
.form input:focus,.form textarea:focus{outline:0;border-color:var(--blue);background:#fff;box-shadow:0 10px 22px -14px rgba(39,72,232,.7)}
.form .check{display:flex;gap:10px;align-items:flex-start;font-weight:600;font-size:.95rem}
.form .check input{margin-top:6px;width:18px;height:18px}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.alert{padding:14px 20px;border-radius:16px;margin-bottom:18px;font-weight:700}
.alert.ok{background:#dcf5e7;color:#0f5a43}.alert.bad{background:#ffe2ea;color:#9b2146}

/* Pie */
.site-footer{margin-top:40px;background:var(--ink);color:#c8d0ec;border-radius:var(--r-lg) var(--r-lg) 0 0;padding-top:52px}
.grid-foot{display:grid;grid-template-columns:1.5fr 1.2fr 1fr;gap:40px}
.site-footer .brand{color:#fff;font-size:1.9rem}
.site-footer .brand:hover{color:#fff}
.site-footer p{margin:14px 0 0}
.site-footer h4{color:#fff;font-size:1rem;margin-bottom:12px}
.site-footer a{display:block;color:#c8d0ec;padding:5px 0;font-weight:600;text-decoration:none;font-size:1rem}
.site-footer a:hover{color:var(--sun)}
.site-footer .brand{display:inline-block;padding-bottom:7px}
.copy{border-top:1px solid #2a3868;margin-top:36px;padding-block:22px;font-size:.9rem;color:#8e99c4}

/* Cookies */
.cookie{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(760px,calc(100% - 32px));z-index:99;background:#fff;border-radius:var(--r);padding:18px 22px;display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;box-shadow:0 24px 60px -16px rgba(20,33,74,.45),0 0 0 2px var(--line);animation:up .5s var(--ease)}
.cookie[hidden]{display:none}
.cookie p{margin:0;flex:1 1 320px;font-size:.96rem;line-height:1.5;font-weight:600}
.cookie-btns{display:flex;gap:8px}
.cookie .btn{padding:11px 20px;font-size:.95rem}
@keyframes up{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}}

/* Comentarios */
.comments{padding-block:20px 10px}
.com-grid{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:28px;align-items:start}
.com-form{padding:24px;gap:14px;position:sticky;top:150px}
.com-t{font-size:1.1rem}
.com-form .btn{justify-self:start}
.com-list{display:grid;gap:16px}
.com{display:flex;gap:14px;background:#fff;border:2px solid var(--line);border-radius:var(--r-lg,22px);padding:18px 20px;box-shadow:var(--sh)}
.com .com{box-shadow:none;background:var(--soft);margin-top:12px;padding:14px 16px}
.com>div{min-width:0;flex:1}
.com-av{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-weight:900;background:var(--sun);color:var(--ink)}
.com-av.team{background:var(--blue);color:#fff}
.com-h{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.com-h time{font-size:.85rem;color:#6b7391}
.com-h em{font-style:normal;font-size:.75rem;font-weight:800;background:var(--blue);color:#fff;border-radius:99px;padding:2px 9px}
.com p{margin:6px 0 0;overflow-wrap:anywhere}
@media(max-width:900px){.com-grid{grid-template-columns:1fr}.com-form{position:static}}

@media (prefers-reduced-motion:reduce){*,main{animation:none!important;transition:none!important;scroll-behavior:auto!important}.note{transform:none!important}}

/* Responsive */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr;padding-block:40px 48px}
  .notes{grid-template-columns:1fr;justify-items:stretch}
  .note,.note:nth-child(n){width:100%;transform:none}
  .topics,.cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feature{grid-template-columns:1fr}
  .feature .big-ico{display:none}
  .art-layout{grid-template-columns:1fr}
  .aside{position:static}
  .grid-foot{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  body{font-size:1.06rem}
  .bar{flex-wrap:wrap}
  .find{min-width:100%;order:3}
  .topics,.cards{grid-template-columns:1fr}
  .grid-foot{grid-template-columns:1fr}
  .block{padding-block:44px}
  .page-head h1 .badge{width:52px;height:52px}
}