/* TORELYA - shared stylesheet for the sub-pages (/guias/, /recursos/, /legal/).
   The design tokens and the nav / footer / card / faq components are copied
   verbatim from index.html so the sub-pages are the same site, not a lookalike.
   index.html keeps its own inline CSS and is not affected by this file. */

:root{
  --canvas:#191122;
  --canvas-deep:#120C19;
  --panel:#241A32;
  --panel-hi:#2F2641;
  --line:#2E2540;
  --line-strong:#4D435F;
  --accent:#F07EA8;
  --accent-hover:#F694B7;
  --accent-muted:rgba(240,126,168,.18);
  --text-primary:#F2EEF7;
  --text-secondary:#A99FBC;
  --text-faint:#7E7392;

  --display:'Syne',system-ui,sans-serif;
  --body:'Hanken Grotesk',system-ui,sans-serif;
  --mono:'DM Mono',ui-monospace,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  --pad:clamp(1.35rem,5vw,5rem);
  --maxw:1280px;
  --readw:44rem;
  --gap-s:clamp(3.5rem,7vw,6.5rem);
}

*{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--canvas);
  color:var(--text-primary);
  font-family:var(--body);
  font-weight:400;
  font-size:clamp(1rem,.95rem + .3vw,1.12rem);
  line-height:1.7;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ---------- decorative depth layers, identical to the home page ---------- */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.env i{
  position:absolute;inset:-30%;display:block;
  background:
    radial-gradient(circle at 18% 26%,var(--accent-muted) 0,transparent 42%),
    radial-gradient(circle at 76% 68%,rgba(169,159,188,.12) 0,transparent 46%);
}
.env i+i{background:radial-gradient(circle at 52% 88%,rgba(240,126,168,.09) 0,transparent 40%)}
.grain{
  position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.038;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- skip link + focus ---------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--accent);color:var(--canvas);padding:.85rem 1.3rem;border-radius:0 0 12px 0;font-weight:600;
}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}

/* ---------- nav ---------- */
/* On the home page the nav starts transparent over the hero and JS adds .stuck.
   These pages have no hero behind it, so the solid state is the only state and
   no script is needed. */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;gap:1.5rem;
  padding:.75rem var(--pad);
  background:rgba(21,14,29,.86);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border-bottom:1px solid var(--line);
}
.brand{
  font-family:var(--display);font-weight:800;font-size:1.3rem;letter-spacing:.2em;
  transition:opacity .35s var(--ease-soft);
}
.brand:hover{opacity:.72}
.navlinks{display:flex;gap:.4rem;margin-left:auto;align-items:center}
.navlinks .nl{
  position:relative;font-size:.9rem;color:var(--text-secondary);
  padding:.55rem .85rem;border-radius:10px;
  transition:color .35s var(--ease-soft);
}
.navlinks .nl::after{
  content:"";position:absolute;left:.85rem;right:.85rem;bottom:.32rem;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
}
.navlinks .nl:hover{color:var(--text-primary)}
.navlinks .nl:hover::after{transform:scaleX(1)}
.navlinks .nl[aria-current="page"]{color:var(--text-primary)}
.navlinks .nl[aria-current="page"]::after{transform:scaleX(1)}
.btn-nav{
  font-size:.9rem;font-weight:600;padding:.62rem 1.15rem;border-radius:999px;
  border:1px solid var(--accent);color:var(--accent);margin-left:.6rem;
  transition:background .4s var(--ease-soft),color .4s var(--ease-soft),transform .4s var(--ease);
}
.btn-nav:hover{background:var(--accent);color:var(--canvas);transform:translateY(-1px)}
@media (max-width:900px){.navlinks .nl{display:none}}
@media (pointer:coarse){.btn-nav{min-height:44px}}

/* ---------- menú móvil ---------- */
/* .navmenu declara display:grid, que gana al display:none que el atributo
   hidden aplica por defecto. Sin este !important el panel nunca se cerraría. */
[hidden]{display:none !important}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.navtoggle{
  display:none;margin-left:.6rem;
  width:44px;height:44px;flex:none;
  align-items:center;justify-content:center;
  background:rgba(47,38,65,.35);
  border:1px solid var(--line-strong);border-radius:12px;
  color:var(--text-primary);cursor:pointer;padding:0;
  transition:border-color .4s var(--ease-soft),background .4s var(--ease-soft);
}
.navtoggle:hover{border-color:var(--accent);background:var(--accent-muted)}
.navtoggle .bars{display:block;width:18px;height:12px;position:relative}
.navtoggle .bars i{
  position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;
  transition:transform .35s var(--ease),opacity .25s var(--ease-soft);
}
.navtoggle .bars i:nth-child(1){top:0}
.navtoggle .bars i:nth-child(2){top:5px}
.navtoggle .bars i:nth-child(3){top:10px}
.navtoggle[aria-expanded="true"] .bars i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.navtoggle[aria-expanded="true"] .bars i:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] .bars i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

.navmenu{
  position:fixed;top:0;left:0;right:0;z-index:99;
  display:grid;gap:.1rem;
  padding:calc(var(--navh,4.6rem) + .85rem) var(--pad) 1.5rem;
  background:rgba(18,12,25,.98);
  backdrop-filter:blur(20px) saturate(1.2);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);
  border-bottom:1px solid var(--line);
  box-shadow:0 24px 60px rgba(5,5,10,.6);
  max-height:100vh;max-height:100svh;overflow-y:auto;
}
.navmenu a{
  display:flex;align-items:center;min-height:48px;
  padding:.55rem .2rem;font-size:1.02rem;color:var(--text-secondary);
  border-bottom:1px solid var(--line);
  transition:color .3s var(--ease-soft),padding-left .3s var(--ease);
}
.navmenu a:hover,.navmenu a:focus-visible{color:var(--text-primary);padding-left:.5rem}
.navmenu a[aria-current="page"]{color:var(--accent)}
.navmenu a.mm-cta{
  justify-content:center;margin-top:1.2rem;
  border:1px solid var(--accent);border-radius:999px;
  color:var(--accent);font-weight:600;padding:.85rem 1.4rem;
}
.navmenu a.mm-cta:hover,.navmenu a.mm-cta:focus-visible{
  background:var(--accent);color:var(--canvas);padding-left:1.4rem;
}
.navmenu a.mm-lang{
  border-bottom:none;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);
}

@media (max-width:900px){.navtoggle{display:inline-flex}}
@media (min-width:901px){.navmenu{display:none !important}}
/* Por debajo de 560 px la barra se queda en marca + botón de menú. Con el CTA
   dentro no cabría a 320 px sin desbordar, y el CTA vive en el panel. */
@media (max-width:560px){.nav .btn-nav{display:none}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--body);font-weight:600;font-size:1.02rem;letter-spacing:.004em;
  padding:1.05rem 1.9rem;border-radius:999px;border:1px solid transparent;
  cursor:pointer;position:relative;
  transition:transform .4s var(--ease),background .4s var(--ease-soft),
             box-shadow .5s var(--ease-soft),border-color .4s var(--ease-soft),color .4s var(--ease-soft);
}
.btn-arrow::after{
  content:"";width:.42em;height:.42em;flex:none;
  border-right:2px solid currentColor;border-top:2px solid currentColor;
  transform:rotate(45deg);margin-left:.85em;
  transition:margin-left .45s var(--ease);
}
.btn-arrow:hover::after{margin-left:1.25em}
.btn-primary{
  background:linear-gradient(180deg,var(--accent-hover),var(--accent));
  color:var(--canvas);box-shadow:0 6px 26px rgba(240,126,168,.16);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(240,126,168,.3)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{border-color:var(--line-strong);color:var(--text-primary);background:rgba(47,38,65,.28)}
.btn-ghost:hover{border-color:var(--accent);background:var(--accent-muted);transform:translateY(-2px)}
.btn-sm{font-size:.92rem;padding:.8rem 1.4rem}
@media (pointer:coarse){.btn{min-height:48px}}
@media (max-width:430px){.btn{font-size:.94rem;padding:1rem 1.35rem}}

/* ---------- page shell ---------- */
.wrap{position:relative;z-index:1}
main{display:block}
.page{padding:calc(4.6rem + var(--gap-s)) var(--pad) var(--gap-s)}
.page .inner{max-width:var(--maxw);margin:0 auto}
.page .inner.read{max-width:var(--readw)}
section.band{padding:0 0 var(--gap-s)}
section.band:last-child{padding-bottom:0}

/* ---------- type ---------- */
.kicker{
  font-family:var(--mono);font-size:.7rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--text-secondary);
  margin:0 0 1.5rem;display:flex;align-items:center;gap:.85rem;
}
.kicker::before{
  content:"";width:clamp(20px,3vw,34px);height:1px;flex:none;
  background:linear-gradient(90deg,var(--accent),transparent);
}
/* Syne es una tipografía de display muy ancha: a 24 px una palabra como
   "recomendaciones" mide 342 px y no cabe en los 277 px útiles de una pantalla
   de 320 px. Por eso los títulos permiten partir palabra y guionar, y los
   mínimos del clamp bajan un punto. Sin esto el título se recorta. */
h1,h2,h3,h4{
  font-family:var(--display);font-weight:800;line-height:1.06;letter-spacing:-.028em;margin:0;
  overflow-wrap:break-word;hyphens:auto;
}
h1{font-size:clamp(1.75rem,1.2rem + 3vw,3.4rem);max-width:20ch}
h2{font-size:clamp(1.35rem,1.15rem + 1.5vw,2.25rem);max-width:24ch;letter-spacing:-.022em;line-height:1.14}
h3{font-size:clamp(1.06rem,1rem + .42vw,1.3rem);font-weight:700;letter-spacing:-.012em;line-height:1.25}
h4{font-size:1rem;font-weight:700;letter-spacing:-.008em}
p{margin:0 0 1.15rem;max-width:66ch;overflow-wrap:break-word}
.lede{color:var(--text-secondary);font-size:clamp(1.04rem,1rem + .35vw,1.22rem);max-width:56ch;margin-top:1.5rem;line-height:1.62}
.em{color:var(--accent)}
strong{font-weight:600;color:var(--text-primary)}
code{
  font-family:var(--mono);font-size:.88em;
  background:rgba(47,38,65,.55);border:1px solid var(--line);
  border-radius:6px;padding:.12em .42em;word-break:break-word;
}

/* ---------- breadcrumbs ---------- */
.crumbs{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-faint);margin:0 0 1.6rem;
}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem .7rem;align-items:center}
.crumbs li{display:flex;align-items:center;gap:.7rem}
.crumbs li+li::before{content:"/";color:var(--line-strong)}
.crumbs a{transition:color .35s var(--ease-soft)}
.crumbs a:hover{color:var(--accent)}
.crumbs [aria-current="page"]{color:var(--text-secondary)}

/* ---------- article prose ---------- */
.prose{max-width:var(--readw)}
.prose h2{margin:3.2rem 0 1.1rem}
.prose h3{margin:2.2rem 0 .8rem}
.prose h2:first-child{margin-top:0}
.prose ul,.prose ol{margin:0 0 1.15rem;padding-left:1.35rem;max-width:66ch;color:var(--text-secondary)}
.prose li{margin:0 0 .55rem;line-height:1.68}
.prose li>strong{color:var(--text-primary)}
.prose p{color:var(--text-secondary)}
.prose p.first{color:var(--text-primary)}
.prose a:not(.btn){
  color:var(--text-primary);border-bottom:1px solid var(--line-strong);
  transition:color .35s var(--ease-soft),border-color .35s var(--ease-soft);
}
.prose a:not(.btn):hover{color:var(--accent);border-color:var(--accent)}
.prose ol.steps{list-style:none;counter-reset:s;padding-left:0}
/* El contador va posicionado, NO en una columna de grid. Con display:grid cada
   <strong>, <code> o <a> dentro del li se convierte en un elemento de rejilla
   propio, la columna "auto" se dimensiona con el más ancho de ellos y el texto
   se queda sin sitio. Con position:absolute el contenido fluye como texto
   normal, que es lo que es. */
.prose ol.steps li{
  counter-increment:s;position:relative;
  padding:.9rem 0 .9rem 2.7rem;border-bottom:1px solid var(--line);margin:0;
}
.prose ol.steps li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute;left:0;top:.9rem;
  font-family:var(--mono);font-size:.74rem;line-height:1.68;color:var(--accent);
}
.prose ol.steps li:first-child{border-top:1px solid var(--line)}

.meta{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-faint);margin:1.8rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:center;
}
.meta .dot{width:3px;height:3px;border-radius:50%;background:var(--line-strong);flex:none}

/* ---------- figures (own illustrations only, no third-party images) ---------- */
figure{
  margin:2.2rem 0;padding:1.6rem 1.4rem 1.2rem;
  background:linear-gradient(180deg,var(--panel),rgba(29,21,41,.7));
  border:1px solid var(--line);border-radius:18px;
}
figure svg{width:100%;height:auto;display:block}
figcaption{
  font-family:var(--mono);font-size:.72rem;line-height:1.7;color:var(--text-faint);
  margin-top:1.1rem;letter-spacing:.02em;
}

/* ---------- checklist ---------- */
.checklist{
  margin:2.6rem 0 0;padding:1.9rem 1.7rem;
  background:linear-gradient(180deg,var(--panel-hi),rgba(36,26,50,.75));
  border:1px solid var(--accent-muted);border-radius:20px;
}
.checklist h2{font-size:clamp(1.15rem,1.05rem + .5vw,1.45rem);margin:0 0 1.3rem;max-width:none}
.checklist ul{list-style:none;margin:0;padding:0;display:grid;gap:.85rem;max-width:none}
/* Misma razón que en ol.steps: la casilla va posicionada, no en una columna de
   grid, para que cualquier etiqueta inline dentro del texto no rompa el reparto. */
.checklist li{
  position:relative;padding-left:1.95rem;
  color:var(--text-secondary);line-height:1.6;margin:0;font-size:.99rem;
}
.checklist li::before{
  content:"";position:absolute;left:0;top:.35rem;
  width:1.05rem;height:1.05rem;
  border:1px solid var(--line-strong);border-radius:5px;background:rgba(25,17,34,.6);
}

/* ---------- faq accordion, same behaviour as the home page ---------- */
.faq .list{margin-top:2rem;border-top:1px solid var(--line);max-width:var(--readw)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.5rem 2.8rem 1.5rem 0;position:relative;
  font-family:var(--display);font-weight:700;font-size:clamp(1rem,.95rem + .4vw,1.15rem);
  line-height:1.32;letter-spacing:-.012em;transition:color .4s var(--ease-soft);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.4rem;top:calc(50% - 1px);width:15px;height:2px;
  background:var(--text-secondary);border-radius:2px;transition:background .4s var(--ease-soft)}
.faq summary::before{content:"";position:absolute;right:calc(.4rem + 6.5px);top:calc(50% - 7.5px);width:2px;height:15px;
  background:var(--text-secondary);border-radius:2px;transition:transform .5s var(--ease),opacity .4s var(--ease-soft)}
.faq details[open] summary::before{transform:scaleY(0);opacity:0}
.faq details[open] summary::after{background:var(--accent)}
.faq summary:hover{color:var(--accent)}
.faq .a{padding:0 0 1.6rem;color:var(--text-secondary);max-width:62ch;line-height:1.68}
.faq .a p{margin:0 0 .9rem;color:var(--text-secondary)}
.faq .a p:last-child{margin:0}
.faq .a a{color:var(--text-primary);border-bottom:1px solid var(--line-strong)}
.faq .a a:hover{color:var(--accent);border-color:var(--accent)}

/* ---------- cards, same component as the home page ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr));gap:1.4rem;margin-top:2.6rem}
.card{
  background:linear-gradient(180deg,var(--panel),rgba(29,21,41,.7));
  border:1px solid var(--line);border-radius:20px;
  padding:1.8rem 1.6rem 1.7rem;position:relative;overflow:hidden;
  transition:transform .55s var(--ease),border-color .55s var(--ease-soft),box-shadow .55s var(--ease-soft);
  display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-6px);border-color:var(--line-strong);box-shadow:0 20px 50px rgba(8,5,14,.5)}
.card .num{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;color:var(--text-faint);display:block;margin-bottom:1.2rem}
.card p{color:var(--text-secondary);margin:.85rem 0 0;font-size:.97rem;line-height:1.6}
.card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--accent),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform .75s var(--ease)}
.card:hover::after{transform:scaleX(1)}
.card.lead{border-color:var(--accent-muted);background:linear-gradient(180deg,var(--panel-hi),rgba(36,26,50,.75))}
.card.lead::after{transform:scaleX(.42)}

/* article cards on /guias/ */
a.card{color:inherit}
a.card h3{transition:color .4s var(--ease-soft)}
a.card:hover h3{color:var(--accent)}
.card .go{
  margin-top:auto;padding-top:1.4rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  display:inline-flex;align-items:center;gap:.55rem;
}
.card .go::after{
  content:"";width:.4em;height:.4em;border-right:2px solid currentColor;border-top:2px solid currentColor;
  transform:rotate(45deg);transition:transform .45s var(--ease),margin-left .45s var(--ease);
}
a.card:hover .go::after{margin-left:.3em}

.tag{
  font-family:var(--mono);font-size:.63rem;letter-spacing:.18em;text-transform:uppercase;
  padding:.34rem .7rem;border-radius:999px;white-space:nowrap;
  border:1px solid var(--line-strong);color:var(--text-faint);display:inline-block;
}
.tag.on{border-color:var(--accent);color:var(--accent);background:var(--accent-muted)}

/* ---------- affiliate disclosure ---------- */
/* Deliberately not footer-only: this renders at the top of every page that
   carries paid links, above the first recommendation, never below the fold. */
.disclose{
  margin:2.2rem 0 0;font-family:var(--mono);font-size:.78rem;line-height:1.8;
  color:var(--text-secondary);border-left:2px solid var(--accent);
  background:rgba(47,38,65,.28);border-radius:0 14px 14px 0;
  padding:1.15rem 1.3rem;max-width:62ch;
}
.disclose p{margin:0 0 .55rem;color:var(--text-secondary);max-width:none;font-size:inherit}
.disclose p:last-child{margin:0}
.disclose .en{color:var(--text-primary)}
.disclose a{color:var(--text-primary);border-bottom:1px solid var(--line-strong)}
.disclose a:hover{color:var(--accent);border-color:var(--accent)}

/* the per-link "Enlace pagado" marker, next to the button itself */
.paidmark{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--accent-muted);background:var(--accent-muted);
  border-radius:999px;padding:.3rem .65rem;white-space:nowrap;display:inline-block;
}

/* ---------- resource list ---------- */
.rescat{margin-top:var(--gap-s)}
.rescat:first-of-type{margin-top:2.8rem}
.rescat>h2{margin:0}
.rescat>.catintro{color:var(--text-secondary);margin:1rem 0 0;max-width:60ch}
.reslist{display:grid;gap:1.3rem;margin-top:2rem;
  /* min() evita que el mínimo de 20rem desborde en pantallas de 320 px */
  grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr))}
.res{
  background:linear-gradient(180deg,var(--panel),rgba(29,21,41,.7));
  border:1px solid var(--line);border-radius:20px;padding:1.7rem 1.6rem;
  display:flex;flex-direction:column;
  transition:border-color .55s var(--ease-soft),box-shadow .55s var(--ease-soft);
}
.res:hover{border-color:var(--line-strong);box-shadow:0 20px 50px rgba(8,5,14,.4)}
.res h3{margin:0}
/* Uso personal declarado por la propietaria. Discreta a propósito: informa
   sin competir con el nombre del producto ni parecer un sello de calidad. */
.res .owned{
  margin:.7rem 0 0;font-family:var(--mono);font-size:.63rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);
  display:flex;align-items:center;gap:.5rem;
}
.res .owned::before{
  content:"";width:5px;height:5px;border-radius:50%;flex:none;
  background:var(--accent);
}
.res .desc{color:var(--text-secondary);margin:.9rem 0 0;font-size:.97rem;line-height:1.62}
.res .use{
  margin:1.1rem 0 0;padding-top:1.1rem;border-top:1px solid var(--line);
  color:var(--text-secondary);font-size:.94rem;line-height:1.6;
}
.res .use b{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-faint);display:block;margin-bottom:.45rem;font-weight:500;
}
.res .act{margin-top:auto;padding-top:1.5rem;display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
/* no official affiliate link yet: no button, no dead link, no trip to Amazon */
.res .pending{
  font-family:var(--mono);font-size:.7rem;line-height:1.7;color:var(--text-faint);
  border:1px dashed var(--line-strong);border-radius:12px;padding:.7rem .95rem;max-width:none;margin:0;
}
.res .guidelink{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-secondary);border-bottom:1px solid var(--line-strong);
  transition:color .35s var(--ease-soft),border-color .35s var(--ease-soft);
}
.res .guidelink:hover{color:var(--accent);border-color:var(--accent)}

/* ---------- related / next steps ---------- */
.related{margin-top:var(--gap-s);padding-top:2.4rem;border-top:1px solid var(--line)}
.related h2{font-size:clamp(1.2rem,1.1rem + .5vw,1.5rem);max-width:none}
.related ul{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.1rem}
.related li{margin:0}
.related li a{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:baseline;
  padding:1.15rem .8rem 1.15rem 0;border-bottom:1px solid var(--line);
  transition:background .45s var(--ease-soft),padding-left .45s var(--ease);border-radius:10px;
}
.related li:first-child a{border-top:1px solid var(--line)}
.related li a:hover{background:rgba(47,38,65,.3);padding-left:.9rem}
.related li a span{font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:-.012em;line-height:1.3}
.related li a:hover span{color:var(--accent)}

/* ---------- closing call to action ---------- */
.cta{
  margin-top:var(--gap-s);padding:2.4rem 2rem;
  background:linear-gradient(180deg,var(--panel-hi),rgba(36,26,50,.7));
  border:1px solid var(--line);border-radius:22px;
}
.cta h2{font-size:clamp(1.3rem,1.15rem + .7vw,1.75rem);max-width:22ch}
.cta p{color:var(--text-secondary);margin:1rem 0 0;max-width:52ch}
.cta .row{margin-top:1.8rem;display:flex;gap:.85rem;flex-wrap:wrap}
@media (pointer:coarse){.cta .row .btn{width:100%}}

/* ---------- footer, identical to the home page ---------- */
footer{padding:clamp(3.5rem,7vw,5.5rem) var(--pad) 2.8rem;
  border-top:1px solid var(--line);background:var(--canvas-deep);position:relative;z-index:1}
footer .inner{max-width:var(--maxw);margin:0 auto;display:grid;gap:2.4rem}
@media (min-width:820px){
  footer .inner{grid-template-columns:1fr 1fr;gap:2.6rem 4.5rem;align-items:start}
  footer .fbot{grid-column:1/-1}
}
.fbrand{font-family:var(--display);font-weight:800;font-size:1.3rem;letter-spacing:.2em;margin:0}
.ftag{color:var(--text-secondary);margin:.65rem 0 0;font-size:.96rem}
.fdisc{display:grid;gap:1.1rem;font-size:.86rem;color:var(--text-secondary);max-width:64ch;line-height:1.75}
.fdisc p{margin:0;max-width:none}
.fdisc a{border-bottom:1px solid var(--line-strong);transition:color .35s var(--ease-soft),border-color .35s var(--ease-soft)}
.fdisc a:hover{color:var(--accent);border-color:var(--accent)}
.fbot{display:flex;gap:1.4rem;flex-wrap:wrap;align-items:center;
  font-family:var(--mono);font-size:.71rem;letter-spacing:.06em;color:var(--text-faint);
  border-top:1px solid var(--line);padding-top:1.8rem}
.fbot a{transition:color .35s var(--ease-soft)}
.fbot a:hover{color:var(--accent)}
/* Aviso de marca. DENSO WAVE pide indicarlo al usar las palabras "QR Code";
   va una sola vez por página, en el pie, no repetido en cada artículo. */
.ftm{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;
  color:var(--text-faint);margin:0;
}
@media (min-width:820px){footer .ftm{grid-column:1/-1}}

/* ---------- fuentes técnicas ---------- */
.sources{max-width:var(--readw)}
.sources h2{font-size:clamp(1.2rem,1.1rem + .5vw,1.5rem);max-width:none}
.sources>p{color:var(--text-secondary);margin:1rem 0 0}
.sources ul{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.1rem}
.sources li{
  margin:0;padding:1.1rem 0;border-bottom:1px solid var(--line);
  display:grid;gap:.35rem;
}
.sources li:first-child{border-top:1px solid var(--line)}
.sources .t{color:var(--text-primary);font-size:.99rem;line-height:1.45}
.sources a{
  font-family:var(--mono);font-size:.78rem;line-height:1.5;color:var(--text-faint);
  word-break:break-all;border-bottom:1px solid transparent;
  transition:color .35s var(--ease-soft),border-color .35s var(--ease-soft);
}
.sources a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* ---------- reduced motion, honored completely ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;transition-delay:0s !important;
  }
  .env,.grain{display:none}
}