/* Generated by tools/build-guias.py from the home page's CSS. Edit there, then re-run. */
@font-face{font-family:"League Gothic";src:url("/fonts/league-gothic.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Libre Franklin";src:url("/fonts/libre-franklin.woff2") format("woff2-variations"),url("/fonts/libre-franklin.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Courier Prime";src:url("/fonts/courier-prime-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Courier Prime";src:url("/fonts/courier-prime-700.woff2") format("woff2");font-weight:700;font-display:swap}
:root{--sheet:#F4F4F2;
  --paper:#FFFFFF;
  --ink:#000000;
  --ink-2:#474744;
  --ink-3:#686864;
  --hair:#CACAC5;
  --leader:#9A9A95;
  --on-ink:#CFCFCA;
  --ink-wash:rgba(0,0,0,.06);
  /* the one black surface: results band and the results stub */
  --gray:#000000;
  --on-gray:#FFFFFF;
  --on-gray-2:#BDBDBD;
  --hair-gray:#4A4A4A;
  --gray-wash:rgba(255,255,255,.1);
  /* red sampled from img/plews-dark.png (#EA2227, the logo's solid red).
     --red is the logo red for fills, marks and large figures; --red-ink is the same hue
     darkened just enough for small text and the send button (AA on white and on the sheet);
     --red-lift is the same hue lightened for small text on the black surfaces. */
  --red:#EA2227;--red-text:#EA2227;
  --red-ink:#D71F24;
  --red-press:#B81A1E;
  --red-lift:#F06468;
  --focus:var(--ink);
  --black:#000000;
  /* the order is printed on the dark gray. Its filled buttons (Ver, send) use a red that holds
     white print (4.6:1) and still stands off the gray (3.1:1) */
  --cart:#000000; /* "Change all the dark grey colors in the torq website to black." (Carlos, 2026-10-06 01:43) */
  --red-lift-cart:#F36C70; /* --red-lift nudged lighter for small text in the cart */
  --on-cart-2:#BDBDBD;
  --on-cart-3:#A6A6A6;
  --hair-cart:rgba(255,255,255,.22);
  --red-btn:#E52126;

  --display:"League Gothic","Arial Narrow",sans-serif;
  --text:"Libre Franklin",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fill:"Courier Prime","Courier New",monospace;

  --gut:clamp(16px,4.4vw,44px);
  --strip:64px;
  --slip-w:400px;
  --strike:cubic-bezier(.2,.9,.25,1);}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--ink-3) transparent;scrollbar-width:thin}
body{margin:0;background:var(--sheet);color:var(--ink);font:400 16px/1.5 var(--text);
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--strip) + env(safe-area-inset-bottom))}
::selection{background:var(--red-ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
[hidden]{display:none!important}
img{display:block;max-width:100%;height:auto}
picture{display:contents}
source{display:none}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{color:var(--red-text)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p,ol,ul,dl,dd,figure{margin:0}
ol,ul{padding:0;list-style:none}
.num{font-variant-numeric:tabular-nums lining-nums}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:8px;top:-80px;z-index:50;background:var(--ink);color:var(--sheet);padding:10px 14px;font-weight:700;text-decoration:none}
.skip:focus{top:8px}
.skip:hover{color:var(--sheet)}
.label{font:600 .75rem/1.3 var(--text);letter-spacing:.07em;text-transform:uppercase}
.page{max-width:1480px;margin:0 auto}
.col{min-width:0;padding:0 var(--gut)}
.lh{padding-top:14px}
.lh-top{display:flex;flex-wrap:wrap;align-items:center;gap:0 14px;padding-bottom:8px;border-bottom:4px solid var(--ink);position:relative}
.lh-top::after{content:"";position:absolute;left:0;right:0;bottom:-8px;border-bottom:1px solid var(--ink)}
.lh-logo{display:block;flex:none;order:1}
.lh-logo img{width:clamp(100px,30vw,168px);height:auto}
.lh-end{order:3;flex:none;margin-left:auto;display:flex;align-items:center;gap:inherit}
.lh-torq{display:block}
.lh-torq img{display:block;width:clamp(62px,17vw,96px);height:auto}
.lang{flex:none;min-width:44px;height:44px;border:1.5px solid var(--ink);font:700 .8rem/1 var(--text);letter-spacing:.06em}
.lang:hover{background:var(--ink);color:var(--sheet)}
.lh-nav{order:4;flex-basis:100%;display:flex;flex-wrap:wrap;gap:0 clamp(10px,3.4vw,18px);margin-top:4px}
.lh-nav a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:clamp(.84rem,3.9vw,.92rem);text-decoration:none;border-bottom:1px solid transparent}
.lh-nav a:hover{color:var(--red-text);border-bottom-color:currentColor}
@media (min-width:800px) and (max-width:1099.98px),(min-width:1220px){
  .lh-nav{order:2;flex-basis:auto;margin:0 0 0 12px;gap:0 22px}
}
html[lang="en"] .cover h1{font-size:clamp(2.7rem,14.2vw,6rem)}
.list-head{display:grid;gap:6px;margin-bottom:12px}
.list-head h2,.sec h2{font:400 clamp(2.2rem,9vw,4.2rem)/.86 var(--display);text-transform:uppercase;letter-spacing:.01em}
.list-head p,.sec .lede{color:var(--ink-2);max-width:52ch}
.mdl{display:grid;grid-template-columns:minmax(0,44%) minmax(0,1fr);grid-template-areas:"img head" "lines lines" "ficha ficha";column-gap:12px;padding:14px 0 6px;border-bottom:1px solid var(--ink)}
.mdl-img{grid-area:img;align-self:start}
.mdl-img img{width:100%;aspect-ratio:3/4;object-fit:cover}
.mdl-pair .mdl-img img{object-fit:contain}
.mdl-head{grid-area:head;align-self:center;min-width:0}
.mdl-n{font:400 clamp(1.55rem,6.6vw,2.3rem)/.9 var(--display);text-transform:uppercase;letter-spacing:.012em}
.mdl-use{margin-top:5px;color:var(--ink);font-size:.68rem}
.mdl-for{margin-top:8px;font-size:.8rem;line-height:1.42;color:var(--ink-2);max-width:60ch}
button.qbox:hover{border-color:var(--red-ink);color:var(--red-text)}
button.qbox:active{transform:translateY(1px)}
:root{--tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M2 11.5c2.2 1.4 4.1 3.3 5.8 6.1C11 10.4 16 4.6 22.4 1.6' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E")}
.fine{margin-top:18px;font-size:.84rem;line-height:1.5;color:var(--ink-3);max-width:70ch}
.sec{display:grid;gap:10px}
.srow{display:grid;grid-template-columns:2rem minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid var(--hair-gray)}
.srow .p{font:700 .95rem/1 var(--text);font-variant-numeric:tabular-nums;color:var(--on-gray-2)}
.srow .n{font-weight:700;line-height:1.3;min-width:0}
.srow .n small{display:block;font-weight:400;font-size:.8rem;color:var(--on-gray-2)}
.srow .v{font:400 1.7rem/.9 var(--display);font-variant-numeric:tabular-nums}
.srow .v small{font:600 .7rem/1 var(--text);letter-spacing:.05em;margin-left:3px;color:var(--on-gray-2)}
.srow .us{display:inline-flex;align-items:center;gap:4px;margin-left:6px;font:700 .8rem/1 var(--fill);color:var(--red-text);white-space:nowrap}
.srow .us::before{content:"";width:16px;height:13px;background:var(--red-lift);-webkit-mask:var(--tick) center/contain no-repeat;mask:var(--tick) center/contain no-repeat}
.srow .stamp{margin-left:8px;font-size:.78rem;padding:3px 6px 2px;vertical-align:2px}
.foot{background:var(--ink);color:var(--on-ink);--focus:var(--paper);margin-top:clamp(48px,7vw,88px);padding:32px var(--gut) calc(28px + var(--strip));font-size:.86rem}
.foot-in{max-width:1480px;margin:0 auto;display:grid;gap:18px}
.foot img{width:150px;height:auto}
.foot p{max-width:62ch;line-height:1.55}
.foot nav{display:flex;flex-wrap:wrap;gap:0 20px}
.foot nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--sheet);font-weight:600}
.foot nav a:hover{color:var(--red-text)}
.foot p a{color:var(--sheet);text-decoration:underline;text-underline-offset:3px}
.foot p a:hover{color:var(--red-text)}
.foot .tag{font:400 1.5rem/1 var(--display);letter-spacing:.04em;color:var(--sheet)}
.foot .credit{display:inline-flex;align-items:center;gap:7px;min-height:44px;color:var(--on-ink);font-weight:inherit;text-decoration:none}
.foot .credit:hover{color:var(--on-ink);opacity:.75}
.foot .credit:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.foot .credit img{width:auto;height:18px;flex:none}
html:has(#strip[hidden]){--strip:0px}
@media (min-width:760px){
  body{font-size:17px}
  .lh-top{gap:0 22px}
  .mdl{grid-template-columns:clamp(210px,24vw,280px) minmax(0,1fr);grid-template-areas:"img head" "img lines" "img ficha";grid-template-rows:auto auto 1fr;column-gap:28px;padding:22px 0 12px}
  .mdl-head{align-self:start;padding-top:10px}
  .mdl-n{font-size:clamp(1.9rem,2.6vw,2.4rem)}
  .mdl-use{font-size:.7rem}
  .mdl-for{font-size:.86rem}
  .foot-in{grid-template-columns:auto minmax(0,1fr) auto;align-items:end;column-gap:40px}
}
@media (min-width:1100px){
  body{padding-bottom:0}
  .foot{padding-bottom:32px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
/* ═══ only on the search pages (tools/build-guias.py) ═══ */
:root{--strip:0px}
.crumbs{display:flex;flex-wrap:wrap;gap:0 8px;margin-top:18px;font-size:.84rem;color:var(--ink-3)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-2)}
.crumbs span{display:inline-flex;align-items:center}
.g-h1{font:400 clamp(2.6rem,12.4vw,5.4rem)/.86 var(--display);text-transform:uppercase;letter-spacing:.005em;max-width:16ch}
.g-intro{display:grid;gap:12px;margin-top:16px;max-width:62ch}
.g-intro .lede{font-size:clamp(1rem,1.5vw,1.14rem);line-height:1.5;color:var(--ink)}
.g-intro p{color:var(--ink-2)}
.g-list{margin-top:26px;border-top:2px solid var(--ink)}
.g-sec{padding-top:clamp(34px,5vw,56px)}
.g-sec>h2,.g-order h2,.g-more h2{font:400 clamp(2rem,8vw,3.4rem)/.88 var(--display);text-transform:uppercase;letter-spacing:.01em;max-width:20ch}
.g-sec>h2{max-width:none;padding-bottom:10px;border-bottom:2px solid var(--ink)}
.g-sec .mdl{border-bottom:0}
.prose{display:grid;gap:12px;max-width:64ch;margin-top:14px;color:var(--ink-2)}
.prose strong{color:var(--ink);font-weight:700}
.g-body{grid-area:lines;min-width:0}
.g-mdl h3.mdl-n,.g-mdl h2.mdl-n{margin:0}
.gl{margin-top:10px;border-top:1px solid var(--hair)}
.gl li{display:grid;grid-template-columns:auto minmax(12px,1fr) auto;grid-template-areas:"sz ld pr" "sp sp sp";column-gap:10px;row-gap:2px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--hair)}
.gl .sz{grid-area:sz;font:700 clamp(.88rem,3.9vw,.98rem)/1.2 var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.gl .sp{grid-area:sp;font-size:.8rem;line-height:1.35;color:var(--ink-2)}
.gl .sp b{font-weight:600;color:var(--ink)}
.gl .ld{grid-area:ld;align-self:end;margin-bottom:.42em;border-bottom:2px dotted var(--leader)}
.gl .pr{grid-area:pr;font:700 clamp(.88rem,3.9vw,.98rem)/1.2 var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.gl .pr sup{font-size:.62em;font-weight:600;letter-spacing:.02em;margin-right:1px;vertical-align:.5em}
.go{display:inline-flex;align-items:center;justify-content:center;min-height:48px;margin-top:14px;padding:0 20px;background:var(--ink);color:var(--sheet);font-weight:700;font-size:.95rem;text-decoration:none}
.go:hover{background:var(--red-ink);color:#FFFFFF}
.go:active{background:var(--red-press);color:#FFFFFF}
.g-order{margin-top:clamp(44px,6vw,72px);padding:24px var(--gut) 28px;margin-left:calc(var(--gut) * -1);margin-right:calc(var(--gut) * -1);background:var(--gray);color:var(--on-gray);--focus:var(--paper)}
.g-order p{margin-top:10px;max-width:58ch;color:var(--on-gray-2)}
.go-red{background:var(--red-btn);color:#FFFFFF}
.go-red:hover{background:var(--red-press)}
.g-order p a{display:inline-flex;align-items:center;min-height:44px;color:var(--sheet);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.g-more{margin-top:clamp(40px,6vw,64px)}
.g-more ul{margin-top:12px;border-top:2px solid var(--ink)}
.g-more li{border-bottom:1px solid var(--hair)}
.g-more a{display:flex;align-items:center;min-height:52px;padding:6px 0;font-weight:600;text-decoration:none}
@media (min-width:760px){
  .g-mdl{grid-template-columns:clamp(180px,20vw,240px) minmax(0,1fr)}
  .gl li{grid-template-columns:7.4rem auto minmax(12px,1fr) auto;grid-template-areas:"sz sp ld pr";column-gap:12px;padding:9px 0}
  .g-order{margin-left:0;margin-right:0;padding:32px 36px 36px}
}
/* no order slip on these pages, so the menu fits one row from 800px */
@media (min-width:1100px) and (max-width:1219.98px){
  .lh-nav{order:2;flex-basis:auto;margin:0 0 0 12px;gap:0 22px}
}
/* wide desktop (1920 and 2560 screens): edge to edge like the home page, the title on two lines; models two to a row
   (three from 2200), each reading down beside its tyre; the guide's sections side by side; on the aro 18 page the order
   box takes the cell after the last model, sized to its content (T-266 r2) */
@media (min-width:1600px){
  .page,.foot-in{max-width:none}
  .col,.foot{--gut:56px}
  .g-h1{max-width:28ch}
  main{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px;grid-auto-flow:row dense;align-items:start}
  main>*{grid-column:1/-1}
  .g-list{display:contents}
  .g-sec:has(.g-mdl),.g-sec:has(#g-mx),.g-sec:has(#g-comp),.g-list~.g-order{grid-column:auto}
  .g-sec:has(#g-adv){grid-row:span 2}
  main:has(#g-medida)>.g-h1,main:has(#g-medida)>.g-intro{grid-column:1}
  .g-sec:has(#g-medida){grid-column:2/-1;grid-row:span 2}
  .g-sec:has(#g-medida) .prose{grid-template-columns:1fr 1fr;column-gap:32px;max-width:none}
  /* two to a row: the stack stops at 480px so the leaders stay short, and the tyre is centred in the room left */
  .g-mdl{grid-template-columns:minmax(0,1fr) clamp(380px,50vw - 413px,480px);grid-template-areas:"img ." "img head" "img lines" "img .";grid-template-rows:1fr auto auto 1fr;column-gap:24px}
  .g-mdl .mdl-img{align-self:center;justify-self:center;width:100%;max-width:clamp(300px,2.5vw + 282px,340px)}
  .g-order{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:40px;align-items:center;align-content:center}
  .g-order>*{grid-column:1}
  .g-order>.go{grid-column:2;grid-row:1/span 2}
  .g-list~.g-order{align-self:start;margin-top:0}
  main:not(:has(#g-medida))>.g-h1{grid-column:1}
  main:not(:has(#g-medida))>.g-intro{grid-column:2/-1;align-self:end}
  .g-more ul{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);column-gap:56px}
  @media (min-width:2200px){
    main{grid-template-columns:repeat(3,minmax(0,1fr))}
    .g-mdl{grid-template-columns:clamp(300px,2.5vw + 282px,340px) minmax(0,1fr)}
    .g-sec:has(#g-extremo){grid-row:span 2}
    /* three to a row the stack is narrow: the sizes take their two-line form (size, leader, price; then the spec) */
    .gl li{grid-template-columns:auto minmax(12px,1fr) auto;grid-template-areas:"sz ld pr" "sp sp sp";padding:10px 0}
  }
  .mdl-for{font-size:.92rem}
  .mdl-n{font-size:2.7rem}
  .gl .sz,.gl .pr{font-size:1.06rem}
}

/* offer (T-263): small red tag on the line, the original price struck through and muted before the offer price */
.gl .of{display:inline-block;margin-right:4px;padding:3px 6px 2px;background:#D71F24;color:#FFFFFF;font:700 .64rem/1 var(--text);letter-spacing:.08em;text-transform:uppercase;vertical-align:.12em}
.gl .was{margin-right:6px;font-weight:500;font-size:.8em;color:var(--ink-3);text-decoration:line-through;text-decoration-thickness:1.5px}
.gl .pr{position:relative}
.gl .pr .was{position:absolute;right:0;bottom:100%;margin:0 0 2px;font-size:.72rem;line-height:1}

/* gomas de motor page (T-266): its questions stay open (they feed its FAQ data), two columns on wide screens; with seven
   models three to a row, the order box takes the last two cells so no cell is left empty */
.g-faq{margin-top:clamp(44px,6vw,72px)}
.g-faq>h2{font:400 clamp(2rem,8vw,3.4rem)/.88 var(--display);text-transform:uppercase;letter-spacing:.01em;max-width:20ch}
.qa-list{margin-top:14px;border-top:2px solid var(--ink)}
.qa{padding:14px 0 16px;border-bottom:1px solid var(--hair)}
.qa h3{font-weight:700;font-size:1rem;line-height:1.35}
.qa p{margin-top:6px;max-width:68ch;color:var(--ink-2);line-height:1.55}
@media (min-width:1600px){
  .qa-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px}
}
@media (min-width:2200px){
  main:has(#g-motor) .g-list~.g-order{grid-column:span 2}
}
.gl li.off{padding-top:24px}

/* city pages (T-432): the Santiago store's facts beside a real Google map (default view, lazy), and the three buying
   steps on the gomas de motor pages, three across from 1100 */
.g-store,.g-steps{margin-top:clamp(44px,6vw,72px)}
.g-store>h2,.g-steps>h2{font:400 clamp(2rem,8vw,3.4rem)/.88 var(--display);text-transform:uppercase;letter-spacing:.01em}
.g-store-in{display:grid;gap:16px;margin-top:14px;padding-top:14px;border-top:2px solid var(--ink)}
.g-facts{display:grid;gap:12px}
.g-facts dt{font:600 .75rem/1.3 var(--text);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.g-facts dd{margin:2px 0 0;font-weight:600;line-height:1.45}
.g-facts dd a{display:inline-flex;align-items:center;min-height:44px}
.g-store-in>.go{justify-self:start;margin-top:0}
.g-map{border:1px solid var(--ink);background:var(--paper)}
.g-map iframe{display:block;width:100%;height:auto;aspect-ratio:4/3;border:0}
.g-steps .qa p a{font-weight:600}
@media (min-width:760px){
  .g-store-in{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);grid-template-rows:auto 1fr;column-gap:40px;align-items:start}
  .g-map{grid-column:2;grid-row:1/span 2}
}
@media (min-width:1100px){
  .g-steps .qa-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:40px}
}
@media (min-width:1600px){
  .g-steps .qa-list{column-gap:56px}
  .g-store-in{grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:56px}
  .g-map iframe{aspect-ratio:21/9;max-height:460px}
}