/* Just Enough Room — estilos del sitio (sale de ejemplos/sitio_guia.html, aprobada el 22-sep).
   Sin fuentes ni hojas de terceros: fuentes del sistema, servidas desde el propio dominio. */
:root{
  --paper:#f7f2e8; --paper-2:#fffdf8; --ink:#191512; --ink-2:#5c534a;
  --rule:#ddd3c2; --rule-2:#cabca4;
  --accent:#b03d1e; --accent-ink:#8a2f16;
  --blue:#2f5266; --blue-soft:#e6eef2;
  --ok:#3c6b45; --ok-soft:#e5efe6;
  --shadow:0 1px 0 rgba(25,21,18,.06), 0 8px 24px -12px rgba(25,21,18,.18);
  --serif:"Iowan Old Style","Charter","Palatino Linotype","Book Antiqua",Georgia,serif;
  --sans:"Avenir Next","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --paper:#15120e; --paper-2:#1c1813; --ink:#f2ece1; --ink-2:#a79c8c;
  --rule:#332c22; --rule-2:#473d2e; --accent:#e4744d; --accent-ink:#ef8c68;
  --blue:#8fb9cf; --blue-soft:#182530; --ok:#83bb8f; --ok-soft:#18261b;
  --shadow:0 1px 0 rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
}}
:root[data-theme=dark]{
  --paper:#15120e; --paper-2:#1c1813; --ink:#f2ece1; --ink-2:#a79c8c;
  --rule:#332c22; --rule-2:#473d2e; --accent:#e4744d; --accent-ink:#ef8c68;
  --blue:#8fb9cf; --blue-soft:#182530; --ok:#83bb8f; --ok-soft:#18261b;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.62 var(--sans);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}
.wrap{max-width:720px;margin:0 auto;padding:0 16px}
a{color:var(--ink)}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:8px 12px;z-index:50}
.skip:focus{left:8px}

/* masthead */
header.mast{border-bottom:1px solid var(--rule);background:var(--paper-2)}
.mast .wrap{padding-top:18px;padding-bottom:14px}
.mast-top{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.logo{font:700 25px/1 var(--serif);letter-spacing:-.02em;text-decoration:none;color:var(--ink)}
.logo em{font-style:normal;color:var(--accent)}
nav.top{display:flex;gap:18px;font:500 12.5px/1 var(--sans);text-transform:uppercase;letter-spacing:.1em}
nav.top a{color:var(--ink-2);text-decoration:none;padding-bottom:2px;border-bottom:1px solid transparent}
nav.top a:hover{color:var(--accent);border-color:currentColor}
.issue{
  margin-top:12px;padding-top:9px;border-top:1px solid var(--rule);
  font:500 11px/1.3 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--ink-2);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px
}
@media(max-width:659px){.issue{display:none}}   /* en el celular, lo primero que se ve es el título (benchmark, mejora 4) */

/* divulgación: primero, antes de cualquier enlace */
.disclosure{
  margin:22px 0 0;padding:11px 15px;background:var(--blue-soft);
  border-left:3px solid var(--blue);border-radius:0 6px 6px 0;
  font:400 13.5px/1.5 var(--sans);color:var(--ink)
}
.disclosure b{font-weight:700}

/* título */
.kicker{margin:34px 0 10px;font:700 11.5px/1 var(--sans);letter-spacing:.19em;text-transform:uppercase;color:var(--accent)}
h1{margin:0 0 16px;font:700 clamp(31px,6.4vw,47px)/1.08 var(--serif);letter-spacing:-.025em;text-wrap:balance}
.byline{
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  padding:13px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  font:400 13.5px/1.45 var(--sans);color:var(--ink-2)
}
.byline a{color:var(--ink)}
.avatar{
  width:32px;height:32px;border-radius:50%;flex:none;background:var(--ink);color:var(--paper);
  display:grid;place-items:center;font:700 11px/1 var(--sans);letter-spacing:.04em
}
.byline b{color:var(--ink);font-weight:700}
.dot{color:var(--rule-2)}
.lede{font:400 19px/1.55 var(--serif);margin:26px 0;color:var(--ink)}
p{margin:18px 0}

/* puente método -> guía y vuelta a la guía */
.bridge{margin:22px 0;padding:12px 15px;border:1.5px solid var(--ink);border-radius:9px;background:var(--paper-2);font:500 14.5px/1.45 var(--sans)}
.bridge a{font-weight:700;color:var(--accent-ink)}

/* empieza aquí */
.start{margin:32px 0;border:1.5px solid var(--ink);border-radius:10px;overflow:hidden;background:var(--paper-2);box-shadow:var(--shadow)}
.start h2{margin:0;padding:11px 16px;background:var(--ink);color:var(--paper);font:700 11.5px/1 var(--sans);letter-spacing:.17em;text-transform:uppercase}
/* tabla de decisión (plantilla v2): en el celular cada fila es una tarjeta; desde 660 px, tabla */
.decide{width:100%;border-collapse:collapse}
/* en el celular los títulos se ocultan solo a la vista: el lector de pantalla los sigue leyendo (G2) */
.decide thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.decide tr.pick{display:block;padding:14px 16px;border-top:1px solid var(--rule)}
.decide tr.pick:first-child{border-top:0}
.decide td{display:block;padding:0}
.decide td.for{font:700 11px/1.3 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}
.decide td.what{margin:7px 0 4px;font:700 17px/1.25 var(--serif)}
.decide td.why{font-size:14px;color:var(--ink-2);margin:0 0 10px}
.decide td.go{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.decide a.jump{font:700 13px/1.2 var(--sans);color:var(--accent-ink)}
.decide .btn{padding:9px 14px;font-size:14px}
@media(min-width:660px){
  .decide thead{position:static;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;white-space:normal;display:table-header-group}
  .decide th{padding:9px 12px;text-align:left;font:700 11px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);border-bottom:1px solid var(--rule)}
  .decide tr.pick{display:table-row}
  .decide td{display:table-cell;padding:12px;vertical-align:top;border-top:1px solid var(--rule)}
  .decide td.what,.decide td.why{margin:0}
  .decide td.go{display:table-cell}
  .decide td.go .btn{margin-top:8px}
}

/* tabla de medidas: el scroll, si hace falta, va DENTRO de la tabla (nunca en la página) */
.sizes{margin:32px 0}
.sizes h2,.versus h2,.dontbuy h2,.questions h2{font:700 22px/1.25 var(--serif);margin:0 0 12px}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--rule);border-radius:9px;background:var(--paper-2)}
.sizes-t{border-collapse:collapse;min-width:520px;width:100%;font:400 14px/1.4 var(--sans)}
.sizes-t th,.sizes-t td{padding:10px 12px;text-align:left;vertical-align:top;border-top:1px solid var(--rule)}
.sizes-t thead th{border-top:0;font:700 11px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.sizes-t tbody th{font-weight:700;min-width:150px}
.sizes-t tbody th a.jump{color:var(--ink)}
.sizes-t .src{display:block;margin-top:4px;font:400 12px/1.35 var(--sans);color:var(--ink-2)}
.sizes-t .src a{color:var(--ink-2)}
.sizes-t .nodata{font-size:12.5px;color:var(--ink-2);font-style:italic}
.cap{white-space:nowrap}
.rng{white-space:nowrap}       /* plantilla 5: "7 – 9 in" en una línea */
.item h3 .cap{font-weight:600;color:var(--ink-2)}
.fit-pista{margin:6px 0 0;font:400 12.5px/1.4 var(--sans);color:var(--ink-2)}
/* plantilla 3: en el celular, cada producto es una tarjeta con sus medidas en filas (nada se corta) */
@media(max-width:659px){
  .sizes .scroll-x{overflow:visible}
  .sizes-t{min-width:0}
  .sizes-t thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .sizes-t,.sizes-t tbody,.sizes-t tr,.sizes-t th,.sizes-t td{display:block;width:auto}
  .sizes-t tbody tr{padding:12px 14px;border-top:1px solid var(--rule)}
  .sizes-t tbody tr:first-child{border-top:0}
  .sizes-t tbody th,.sizes-t td{border-top:0;padding:0}
  .sizes-t tbody th{min-width:0;margin:0 0 8px}
  .sizes-t td{display:grid;grid-template-columns:minmax(84px,34%) 1fr;gap:8px;padding:5px 0;border-top:1px dashed var(--rule)}
  .sizes-t td::before{content:attr(data-label);font:700 11px/1.5 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
}

/* X vs Y */
.versus{margin:36px 0}
.vs-grid{display:grid;grid-template-columns:1fr;gap:14px}
.vs-side{padding:14px 16px;border:1px solid var(--rule);border-radius:9px;background:var(--paper-2)}
.vs-side h3{margin:0;font:700 18px/1.25 var(--serif)}
.vs-side .pickif{margin:10px 0 0;font-size:15px}
@media(min-width:660px){.vs-grid{grid-template-columns:1fr 1fr}}

/* Don't buy one if… y preguntas */
.dontbuy{margin:36px 0}
.dontbuy ul{margin:0;padding-left:20px}
.dontbuy li{margin:0 0 10px}
.dontbuy li a{font-weight:700;color:var(--accent-ink)}
.questions{margin:36px 0}
.questions h3{margin:20px 0 6px;font:700 17px/1.3 var(--serif)}
.questions p{margin:0}

/* fit finder */
.fit{margin:32px 0;padding:16px 18px;border:1.5px dashed var(--blue);border-radius:10px;background:var(--blue-soft)}
.fit h2{margin:0 0 8px;font:700 11.5px/1 var(--sans);letter-spacing:.17em;text-transform:uppercase;color:var(--blue)}
.fit label{display:block;font:700 16px/1.35 var(--serif);margin-bottom:9px}
.fit-row{display:flex;gap:8px;align-items:center}
.fit input{width:9em;font:600 17px/1 var(--sans);padding:9px 10px;border:1.5px solid var(--ink);border-radius:7px;background:var(--paper-2);color:var(--ink)}
.fit select{font:600 15px/1 var(--sans);padding:9px 8px;border:1.5px solid var(--ink);border-radius:7px;background:var(--paper-2);color:var(--ink)}
.fit-out{margin:10px 0 0;font:700 14px/1.4 var(--sans);color:var(--ink)}
.fit-note{margin:8px 0 0;font:400 12.5px/1.45 var(--sans);color:var(--ink-2)}
.item.fit-si{background:var(--ok-soft);box-shadow:inset 3px 0 0 var(--ok);padding-left:12px}
.item.fit-no{opacity:.55}
.fitmark{display:block;font:700 11px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ok);margin-bottom:6px}
.fitmark:empty{display:none}

/* cómo elegimos */
.method{margin:32px 0;padding:18px 20px;border:1px dashed var(--rule-2);border-radius:9px}
.method h3{margin:0 0 9px;font:700 11.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.method p{margin:0;font-size:14.5px;color:var(--ink-2)}
.method p+p{margin-top:9px}
.method i{color:var(--ink);font-style:italic}

/* secciones */
section.chunk{margin:52px 0 0;scroll-margin-top:20px}
.sec-head{display:flex;align-items:flex-start;gap:14px;border-bottom:2px solid var(--ink);padding-bottom:9px}
.sec-no{font:700 30px/.85 var(--serif);color:var(--accent);flex:none;letter-spacing:-.04em}
.sec-head h2{margin:0;font:700 22px/1.2 var(--serif);letter-spacing:-.015em}
.sec-head .n{display:block;font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:5px}

/* ficha de producto */
.item{padding:24px 0;border-bottom:1px solid var(--rule);scroll-margin-top:20px}
.item-top{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.diagram{width:150px;flex:none;border:1px solid var(--rule);border-radius:7px;background:var(--paper-2);padding:8px;color:var(--ink)}
.diagram svg{display:block;width:100%;height:auto}
.diagram .dim{color:var(--accent)}
.diagram text{font-family:var(--sans)}
.diagram .btn{margin-top:8px;width:100%;justify-content:center;padding:8px 6px;font-size:14px;text-align:center}
.item-body{flex:1;min-width:230px}
.tag{display:inline-block;font:700 10.5px/1 var(--sans);letter-spacing:.11em;text-transform:uppercase;padding:4px 9px;border-radius:20px;margin-bottom:8px}
.t-basic{background:var(--blue-soft);color:var(--blue)}
.t-mid{background:rgba(176,61,30,.1);color:var(--accent)}
.t-up{background:var(--ink);color:var(--paper)}
.item h3{margin:0 0 3px;font:700 18.5px/1.28 var(--serif);letter-spacing:-.01em}
.model{font:500 12px/1.3 var(--sans);letter-spacing:.06em;color:var(--ink-2);margin-bottom:6px}
.specs{display:flex;gap:16px;flex-wrap:wrap;margin:10px 0 4px;padding:9px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.spec{font:400 13px/1.3 var(--sans)}
.spec b{display:block;font:700 10.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-bottom:3px}
.src{font:400 12px/1.4 var(--sans);color:var(--ink-2);margin:0 0 10px}
.src a{color:var(--ink-2)}
.reason{font-size:15px;margin:11px 0}
.notfor{font:italic 400 14px/1.5 var(--serif);color:var(--ink-2);padding-left:13px;border-left:2px solid var(--rule-2);margin:11px 0}
.buys{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px;align-items:center}
.btn{
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  font:700 14px/1.15 var(--sans);padding:11px 17px;border-radius:7px;min-height:44px;   /* área táctil de 44 px */
  background:var(--ink);color:var(--paper);border:1.5px solid var(--ink);
  transition:transform .12s ease, box-shadow .12s ease
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn .arrow{font-size:15px;line-height:1}
/* aviso FTC junto al enlace patrocinado: visible, mismo color que el botón (contraste), puede bajar de línea */
.btn{flex-wrap:wrap;row-gap:3px}
.btn .paid{font-weight:400;font-size:.85em;white-space:nowrap}
.sticky .btn .paid,.diagram .btn .paid{flex-basis:100%}   /* botones angostos: el aviso en su propia línea */
.sticky .btn{white-space:nowrap}
.mini{font:400 12px/1.3 var(--sans);color:var(--ink-2)}

/* pasos de las páginas método */
ol.steps{list-style:none;counter-reset:paso;padding:0;margin:30px 0 0}
ol.steps>li{counter-increment:paso;margin:0 0 34px;padding-left:52px;position:relative}
ol.steps>li::before{content:counter(paso,decimal-leading-zero);position:absolute;left:0;top:-2px;font:700 30px/.9 var(--serif);color:var(--accent);letter-spacing:-.04em}
ol.steps h2{margin:0 0 6px;font:700 21px/1.25 var(--serif);letter-spacing:-.015em}
/* ideas (alternativas, no "en orden"): la letra del cartel en lugar del número */
ol.steps>li.letra::before{content:attr(data-letra);content:attr(data-letra) / "";letter-spacing:0}   /* el lector oye "Idea A:" una vez */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
ol.steps p{margin:10px 0}
.need{margin:26px 0;padding:14px 18px;border:1px solid var(--rule-2);border-radius:9px;background:var(--paper-2)}
.need h3{margin:0 0 8px;font:700 11.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.need ul{margin:0;padding-left:20px}

/* nota de precios */
.pricenote{margin:30px 0;padding:13px 16px;border:1px solid var(--rule-2);border-radius:8px;background:var(--paper-2);font:400 13.5px/1.5 var(--sans);color:var(--ink-2)}
.pricenote b{color:var(--ink)}

/* otras guías, índices e inicio */
.more{margin:46px 0 0;border-top:2px solid var(--ink);padding-top:20px}
.more h3,.more h2{margin:0 0 15px;font:700 11.5px/1 var(--sans);letter-spacing:.17em;text-transform:uppercase;color:var(--ink-2)}
.more-list{display:grid;gap:2px}
.more-list a{display:block;padding:13px 0;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--ink);font:700 16.5px/1.3 var(--serif)}
.more-list a:hover{color:var(--accent)}
.more-list .empty{padding:13px 0;color:var(--ink-2);font-size:15px}

/* páginas fijas */
.legal h2{margin:34px 0 8px;font:700 21px/1.25 var(--serif)}
.legal p,.legal li{font-size:16px}
.legal .eff{font:500 13px/1.4 var(--sans);color:var(--ink-2)}

footer{margin-top:56px;border-top:1px solid var(--rule);background:var(--paper-2);padding:26px 0 90px}
footer .wrap{font:400 13px/1.7 var(--sans);color:var(--ink-2)}
footer a{color:var(--ink-2)}
footer .fnav{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:12px;font-weight:500}
body.no-sticky footer{padding-bottom:26px}

/* barra fija en móvil */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--paper-2);border-top:1.5px solid var(--ink);
  padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  box-shadow:0 -6px 20px -10px rgba(25,21,18,.3)
}
.sticky .lab{font:700 12.5px/1.3 var(--sans)}
.sticky .lab span{display:block;font-weight:400;font-size:11.5px;color:var(--ink-2)}
.sticky .btn{padding:10px 15px;font-size:14px}
@media(min-width:760px){.sticky{display:none} footer{padding-bottom:26px}}

/* guía: saltos bajo la firma (benchmark, mejora 4) */
.jumps{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;margin:6px 0 0;font:700 13.5px/1.2 var(--sans)}
.jumps a{display:inline-flex;align-items:center;min-height:44px;color:var(--accent-ink)}
.start,.sizes,.questions{scroll-margin-top:16px}

/* método: el cartel del pin + "The short version" + imprimir (benchmark, mejoras 3 y 5) */
.pin-card{display:flex;gap:16px;align-items:flex-start;margin:22px 0}
.pin-fig{margin:0;flex:none;width:112px}
.pin-fig img{display:block;width:100%;height:auto;border:1px solid var(--rule);border-radius:6px;background:var(--paper-2)}
.pin-fig figcaption{margin:2px 0 0}
/* sin "The short version" (canario, carteles viejos): el cartel en una fila corta, sin columna vacía (G2) */
.pin-card.solo .pin-fig{display:flex;align-items:center;gap:14px;width:auto}
.pin-card.solo .pin-fig img{width:72px}
.pin-card.solo .pin-fig figcaption{margin:0}
.save{display:inline-flex;align-items:center;min-height:44px;font:700 13.5px/1.2 var(--sans);color:var(--accent-ink)}
.short{flex:1;min-width:0;padding:12px 15px;border:1px solid var(--rule-2);border-radius:9px;background:var(--paper-2)}
.short h2{margin:0 0 8px;font:700 11.5px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.short ul{margin:0;padding:0;list-style:none}
.short li{margin:0 0 4px;font:700 16px/1.35 var(--serif)}
.short p{margin:8px 0 0;font-size:14.5px;line-height:1.45}
.print-btn{margin-top:10px;min-height:44px;padding:0 16px;border:1.5px solid var(--ink);border-radius:7px;background:transparent;
  color:var(--ink);font:700 14px/1 var(--sans);cursor:pointer}
.print-btn[hidden],.print-only{display:none}
@media screen{#tarjeta-impresa{display:none!important}}   /* la copia para imprimir nunca se ve en pantalla */
@media(min-width:660px){.pin-fig{width:170px}}

@media print{
  header.mast,footer,.sticky,.skip,.more,.print-btn,.save{display:none!important}
  body{background:#fff;color:#000}
  /* "Print this card": solo la tarjeta, con renglones para anotar las medidas del lector */
  html.imprime-tarjeta body>*:not(#tarjeta-impresa){display:none!important}
  #tarjeta-impresa{display:block;border:2px solid #000;border-radius:10px;padding:18px 22px;max-width:6.5in;font-family:var(--sans);
    background:#fff;color:#000}
  #tarjeta-impresa *{color:#000!important}                  /* también desde el modo oscuro */
  #tarjeta-impresa .print-only{display:block}
  #tarjeta-impresa .print-title{margin:0 0 10px;font:700 20px/1.25 var(--serif)}
  #tarjeta-impresa h2{margin:0 0 12px;font:700 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
  #tarjeta-impresa ul{margin:0;padding:0;list-style:none}
  #tarjeta-impresa li{display:flex;align-items:flex-end;gap:12px;margin:0 0 18px;font:700 15px/1.3 var(--serif)}
  #tarjeta-impresa .blank{display:block;flex:1;min-width:2in;border-bottom:1px solid #000;height:1.3em}
  #tarjeta-impresa .print-url{margin:14px 0 0;font:400 11px/1.3 var(--sans)}
}