/* ============================================================
   Telesgrama — hoja de estilos
   Identidad: telégrafo + televisor.
   Tipografía Omnibus-Type (Buenos Aires): Archivo + Chivo Mono.
   Acento: cian de las barras de color SMPTE.
   ============================================================ */

:root{
  /* superficies y texto — neutros con sesgo frío hacia el cian */
  --bg:          #f3f6f6;
  --surface:     #ffffff;
  --surface-alt: #e9eeee;
  --text:        #0d1414;
  --text-soft:   #556363;
  --line:        #d4dcdc;
  --line-soft:   #e3e9e9;

  /* acento y semánticos */
  --accent:      #007d89;
  --accent-ink:  #ffffff;
  --accent-soft: #dff0f1;
  --good:        #0d6b41;
  --good-soft:   #dcefe4;

  /* barras de color 75% (patrón de prueba de TV) */
  --bar-1: #b4b4b4;
  --bar-2: #bfbf00;
  --bar-3: #00bfbf;
  --bar-4: #00bf00;
  --bar-5: #bf00bf;
  --bar-6: #bf0000;
  --bar-7: #2222bf;

  --wrap: 1180px;

  --display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body:    "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:    "Chivo Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:          #0a0e0e;
    --surface:     #121818;
    --surface-alt: #0f1515;
    --text:        #edf2f2;
    --text-soft:   #8e9c9c;
    --line:        #232d2d;
    --line-soft:   #1a2222;

    --accent:      #2fc9d8;
    --accent-ink:  #04191c;
    --accent-soft: #10292d;
    --good:        #46cf8d;
    --good-soft:   #0f261c;
  }
}

:root[data-theme="dark"]{
  --bg:          #0a0e0e;
  --surface:     #121818;
  --surface-alt: #0f1515;
  --text:        #edf2f2;
  --text-soft:   #8e9c9c;
  --line:        #232d2d;
  --line-soft:   #1a2222;

  --accent:      #2fc9d8;
  --accent-ink:  #04191c;
  --accent-soft: #10292d;
  --good:        #46cf8d;
  --good-soft:   #0f261c;
}

*,*::before,*::after{ box-sizing:border-box; }

/* El atributo `hidden` trae display:none del user-agent, que cualquier
   `display` de autor pisa sin avisar. Esto lo vuelve confiable. */
[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{ margin:0; font-family:var(--display); line-height:1.05; text-wrap:balance; }
h1{
  font-size:clamp(2.4rem, 6.4vw, 4.6rem);
  font-weight:800;
  font-stretch:118%;
  letter-spacing:-.02em;
  margin-top:.35em;
}
h2{
  font-size:clamp(1.6rem, 3.4vw, 2.5rem);
  font-weight:800;
  font-stretch:112%;
  letter-spacing:-.015em;
  margin-top:.3em;
}
h3{ font-size:1.0625rem; font-weight:700; letter-spacing:-.005em; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
button,input,select{ font:inherit; color:inherit; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:28px; }

/* etiqueta mono — el idioma del telegrama */
.label{
  font-family:var(--mono);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-soft);
}
.label--accent{ color:var(--accent); }

.stop{
  font-family:var(--mono);
  font-size:.72em;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--accent);
  white-space:nowrap;
}

.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;
}
.skip{
  position:absolute; left:-9999px; top:12px; z-index:100;
  background:var(--accent); color:var(--accent-ink); padding:10px 16px;
}
.skip:focus{ left:28px; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ---------- Barras de color (el único gesto fuerte) ---------- */
.bars{
  height:4px;
  background:linear-gradient(
    to right,
    var(--bar-1) 0 14.285%, var(--bar-2) 14.285% 28.57%,
    var(--bar-3) 28.57% 42.855%, var(--bar-4) 42.855% 57.14%,
    var(--bar-5) 57.14% 71.425%, var(--bar-6) 71.425% 85.71%,
    var(--bar-7) 85.71% 100%
  );
}

/* ---------- Cinta de transmisión ---------- */
.ticker{
  overflow:hidden;
  background:var(--surface-alt);
  border-bottom:1px solid var(--line);
}
.ticker__track{
  display:flex; width:max-content;
  animation:desplazar 46s linear infinite;
}
.ticker__msg{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-soft);
  padding:9px 0;
  padding-right:3rem;
  white-space:nowrap;
}
.ticker__msg b{ color:var(--accent); font-weight:700; margin-inline:.35rem; }

@keyframes desplazar{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.nav__inner{ display:flex; align-items:center; gap:36px; height:68px; }
.nav__links{
  display:flex; gap:28px; margin-left:auto;
  font-family:var(--mono); font-size:.75rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--text-soft);
}
.nav__links a:hover{ color:var(--accent); }

.logo{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--display); font-weight:800; font-stretch:112%;
  letter-spacing:-.02em; font-size:1.25rem;
}
.logo--sm{ font-size:1.05rem; }
.logo__mark{
  width:22px; height:16px; flex:none; display:inline-block;
  background:linear-gradient(
    to right,
    var(--bar-2) 0 25%, var(--bar-3) 25% 50%,
    var(--bar-5) 50% 75%, var(--bar-6) 75% 100%
  );
}

/* ---------- Hero ---------- */
.hero{ padding:78px 0 66px; }
.lead{
  max-width:56ch; margin-top:26px;
  font-size:1.125rem; color:var(--text-soft);
}

.search{ display:flex; margin-top:38px; max-width:540px; border:1px solid var(--text); background:var(--surface); }
.search input{
  flex:1; min-width:0;
  padding:15px 18px; border:0; background:transparent;
  font-size:1rem;
}
.search input::placeholder{ color:var(--text-soft); }
.search input:focus{ outline:none; }
.search:focus-within{ outline:2px solid var(--accent); outline-offset:2px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--text); color:var(--bg); border:0;
  padding:15px 26px; cursor:pointer;
  font-family:var(--mono); font-size:.75rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  white-space:nowrap;
  transition:background .15s ease, color .15s ease;
}
.btn:hover{ background:var(--accent); color:var(--accent-ink); }
.btn--sm{ padding:11px 18px; font-size:.7rem; }

.stats{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:0; margin:56px 0 0; padding:0;
  border-top:1px solid var(--line);
}
.stats > div{
  padding:18px 20px 18px 0;
  border-right:1px solid var(--line-soft);
}
.stats > div:last-child{ border-right:0; }
.stats dt{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-soft);
}
.stats dd{
  margin:6px 0 0; font-family:var(--display);
  font-size:1.5rem; font-weight:800; font-stretch:110%; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}

/* ---------- Marcas ---------- */
.brands{ border-block:1px solid var(--line); background:var(--surface-alt); }
.brands__row{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 34px;
  padding-block:18px;
  font-family:var(--mono); font-size:.8rem; font-weight:500;
  letter-spacing:.08em; color:var(--text-soft);
}
.brands__row .label{ margin-right:auto; }
.brands__list{ display:flex; flex-wrap:wrap; gap:12px 30px; }

/* ---------- Espacios publicitarios ----------
   El slot se dibuja como marcador punteado mientras está vacío.
   Al insertarle el código del anuncio, :empty deja de aplicar
   y el marcador desaparece solo.                                */
.ad{ display:flex; flex-direction:column; gap:7px; }
.ad__label{
  font-family:var(--mono); font-size:.62rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--text-soft);
}
.ad__slot{
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.ad__slot > *{ max-width:100%; }
.ad__slot:empty{
  border:1px dashed var(--line);
  background:var(--surface-alt);
  color:var(--text-soft);
  font-family:var(--mono); font-size:.7rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
}
.ad__slot:empty::after{ content:attr(data-formato); }

/* franjas de ancho completo, arriba y abajo de la página */
.ad-banda{ border-block:1px solid var(--line); }
.ad-banda .wrap{ padding-block:32px; }
.ad--billboard .ad__slot{ min-height:90px; }
.ad--inferior  .ad__slot{ min-height:250px; }

/* intercalado dentro del listado, con el mismo ritmo que las filas */
.ad--infeed{
  padding:20px 18px;
  background:var(--surface);
  border-bottom:1px solid var(--line);
}
.ad--infeed .ad__slot{ min-height:90px; }

/* destacado: formato nativo arriba del listado */
.ad--destacado{
  position:relative; margin-top:26px;
  padding:18px 18px 18px 24px;
  background:var(--surface); border:1px solid var(--line);
  display:flex; flex-direction:column; gap:12px;
}
.ad--destacado::before{
  content:""; position:absolute; inset:0 auto 0 0; width:4px;
  background:linear-gradient(
    to bottom,
    var(--bar-2) 0 25%, var(--bar-3) 25% 50%,
    var(--bar-5) 50% 75%, var(--bar-6) 75% 100%
  );
}
.destacado__fila{ display:flex; align-items:center; gap:22px; }

/* ---------- Secciones ---------- */
.section{ padding:90px 0; }
.section--alt{ background:var(--surface-alt); border-block:1px solid var(--line); }
.section__sub{ margin-top:14px; max-width:58ch; color:var(--text-soft); }

/* ---------- Toolbar ---------- */
.toolbar{
  display:flex; flex-wrap:wrap; gap:14px 20px; align-items:center;
  justify-content:space-between; margin-top:34px;
}
.filtros{ display:flex; flex-wrap:wrap; gap:8px; }
.resumen{ white-space:nowrap; }

.btn--mas{
  align-self:flex-start; margin-top:22px;
  background:transparent; color:var(--text);
  border:1px solid var(--text);
}
.btn--mas:hover{ background:var(--text); color:var(--bg); }

.select select{
  appearance:none; background:var(--surface); border:1px solid var(--line);
  padding:10px 36px 10px 16px; cursor:pointer; max-width:15rem;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 17px) 53%, calc(100% - 12px) 53%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}

/* ---------- Listado ---------- */
.list__head{
  display:flex; justify-content:space-between;
  margin-top:30px; padding:0 18px 8px;
  border-bottom:1px solid var(--text);
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-soft);
}
.list{ display:flex; flex-direction:column; }

.tv{
  background:var(--surface);
  border-bottom:1px solid var(--line);
}
.tv[open]{ background:var(--accent-soft); }

.tv__head{
  display:flex; align-items:center; gap:22px;
  padding:18px; cursor:pointer; list-style:none;
}
.tv__head::-webkit-details-marker{ display:none; }

.tv__thumb{
  flex:none; width:58px; height:40px;
  border:1px solid var(--line);
  display:grid; place-items:center;
  font-family:var(--mono); font-size:.72rem; font-weight:700;
  color:var(--text-soft);
}
.tv__info{ flex:1; min-width:0; }
.tv__brand{
  font-family:var(--mono); font-size:.66rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-soft);
}
.tv__name{ font-weight:700; font-size:1.05rem; margin-top:3px; letter-spacing:-.01em; }
.tv__meta{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.05em;
  color:var(--text-soft); margin-top:4px;
}

.tv__price{ text-align:right; flex:none; }
.tv__amount{
  font-family:var(--display); font-size:1.4rem; font-weight:800;
  font-stretch:110%; letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.tv__save{
  display:inline-block; margin-top:4px;
  font-family:var(--mono); font-size:.66rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--good); background:var(--good-soft);
  padding:3px 8px;
}
.tv__caret{
  flex:none; width:9px; height:9px;
  border-right:2px solid var(--text-soft); border-bottom:2px solid var(--text-soft);
  transform:rotate(45deg) translateY(-2px); transition:transform .2s ease;
}
.tv[open] .tv__caret{ transform:rotate(-135deg) translateY(-2px); }

.tv__body{ padding:2px 18px 18px 98px; }

.store{
  display:flex; align-items:center; gap:18px;
  padding:11px 0; border-top:1px solid var(--line-soft);
}
.store__name{ flex:1; min-width:0; font-weight:500; }
.store__tag{
  display:inline-block; margin-left:10px;
  font-family:var(--mono); font-size:.62rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--good); background:var(--good-soft); padding:2px 7px;
}
.store__cuotas{
  flex:none; font-family:var(--mono); font-size:.72rem;
  letter-spacing:.04em; color:var(--text-soft);
}
.store__price{
  flex:none; min-width:130px; text-align:right;
  font-family:var(--mono); font-weight:700; font-size:.95rem;
  font-variant-numeric:tabular-nums;
}
.store__link{
  flex:none; border:1px solid var(--line); padding:8px 14px;
  font-family:var(--mono); font-size:.66rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent);
  background:var(--surface);
  transition:.15s ease;
}
.store__link:hover{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }

.empty{ padding:56px 0; text-align:center; color:var(--text-soft); }

/* ---------- Pasos ---------- */
.steps{
  list-style:none; margin:38px 0 0; padding:0;
  display:grid; gap:1px; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  background:var(--line); border:1px solid var(--line);
}
.steps li{ background:var(--surface); padding:28px 26px 30px; }
.steps__n{
  display:block;
  font-family:var(--mono); font-size:.72rem; font-weight:700;
  letter-spacing:.16em; color:var(--accent); margin-bottom:18px;
}
.steps h3{ margin-bottom:8px; }
.steps p{ color:var(--text-soft); font-size:.95rem; }

/* ---------- CTA ---------- */
.cta{
  display:flex; flex-wrap:wrap; gap:36px; align-items:flex-end;
  justify-content:space-between;
  margin-top:34px; padding:36px;
  border:1px solid var(--text); background:var(--surface);
}
.cta__copy{ max-width:46ch; }
.cta__copy p{ margin-top:12px; color:var(--text-soft); }
.cta__form{ display:flex; flex-wrap:wrap; gap:0; position:relative; }
.cta__form input{
  padding:15px 18px; min-width:270px;
  border:1px solid var(--text); border-right:0; background:var(--bg);
}
.cta__form input:focus{ outline:none; }
.cta__form input:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.cta__ok{
  flex-basis:100%; margin-top:12px;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--good);
}

/* ---------- Página puente (ir.html) ---------- */
.puente .nav__inner{ justify-content:space-between; }
.nav__volver{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-soft);
}
.nav__volver:hover{ color:var(--accent); }

.salida{
  display:flex; flex-direction:column; gap:36px;
  padding-block:52px 64px;
  min-height:60vh;
}
.salida .ad--puente{ border-bottom:0; padding:0; background:transparent; }

.traspaso{
  display:flex; flex-direction:column; gap:22px;
  padding:38px; background:var(--surface); border:1px solid var(--text);
}
.traspaso h1{
  font-size:clamp(1.8rem, 4vw, 2.8rem);
  font-weight:800; font-stretch:112%; letter-spacing:-.02em;
  margin-top:0;
}
.traspaso__tv{
  display:flex; align-items:center; gap:22px;
  padding:18px 0; border-block:1px solid var(--line);
}
.traspaso__acciones{ display:flex; flex-wrap:wrap; align-items:center; gap:18px 24px; }
.traspaso__cuenta{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-soft);
}
.traspaso__cuenta b{ color:var(--accent); font-weight:700; }
.traspaso__cancelar{
  background:none; border:0; padding:0 0 0 10px; cursor:pointer;
  font-family:var(--mono); font-size:.75rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-soft);
  text-decoration:underline; text-underline-offset:3px;
}
.traspaso__cancelar:hover{ color:var(--accent); }
.traspaso__aviso{ max-width:62ch; color:var(--text-soft); font-size:.95rem; }
.traspaso__otras{ display:flex; flex-direction:column; gap:6px; }
.traspaso__otras .store:first-child{ border-top:0; }
.traspaso--error{ border-color:var(--line); }

/* ---------- Footer ---------- */
.footer{ border-top:1px solid var(--line); padding-top:48px; }
.footer__inner{
  display:flex; flex-wrap:wrap; gap:30px;
  justify-content:space-between; align-items:flex-start;
  padding-bottom:36px;
}
.footer__inner p{ margin-top:12px; font-size:.9rem; max-width:36ch; color:var(--text-soft); }
.footer nav{
  display:flex; gap:26px;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-soft);
}
.footer nav a:hover{ color:var(--accent); }
.footer__legal{ border-top:1px solid var(--line); padding-block:20px; }
.footer__legal p{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.06em;
  color:var(--text-soft);
}

/* ---------- Responsive ---------- */
@media (max-width:800px){
  .nav__links{ display:none; }

  .ad__slot:empty::after{ content:attr(data-formato-movil); }
  .ad-banda .wrap{ padding-block:24px; }
  .ad--billboard .ad__slot{ min-height:100px; }
  .ad--inferior  .ad__slot{ min-height:250px; }
  .ad--infeed{ padding:18px 16px; }
  .ad--infeed .ad__slot{ min-height:100px; }
  .destacado__fila{ flex-wrap:wrap; gap:14px; }
  .destacado__fila .tv__info{ flex-basis:calc(100% - 76px); }
  .destacado__fila .tv__price{ text-align:left; }
  .destacado__fila .store__link{ flex-basis:100%; text-align:center; }
  .hero{ padding:52px 0 44px; }
  .section{ padding:60px 0; }
  .wrap{ padding-inline:20px; }

  .search{ flex-direction:column; border:0; background:transparent; }
  .search input{ border:1px solid var(--text); background:var(--surface); }
  .search .btn{ width:100%; margin-top:10px; }

  .stats > div{ border-right:0; border-bottom:1px solid var(--line-soft); padding-right:0; }

  .tv__head{ flex-wrap:wrap; gap:14px; padding:16px; }
  .tv__info{ flex-basis:calc(100% - 76px); }
  .tv__price{ text-align:left; flex-basis:100%; }
  .tv__body{ padding:2px 16px 16px; }

  .store{ flex-wrap:wrap; gap:4px 14px; }
  .store__name{ flex-basis:100%; }
  .store__price{ min-width:0; margin-left:auto; text-align:right; }
  .store__link{ flex-basis:100%; text-align:center; margin-top:8px; }

  .salida{ padding-block:32px 44px; gap:26px; }
  .traspaso{ padding:24px; }
  .traspaso__tv{ flex-wrap:wrap; gap:14px; }
  .traspaso__tv .tv__info{ flex-basis:calc(100% - 76px); }
  .traspaso__acciones .btn{ width:100%; }

  .cta{ padding:26px; }
  .cta__form{ width:100%; }
  .cta__form input{ min-width:0; width:100%; border-right:1px solid var(--text); }
  .cta__form .btn{ width:100%; margin-top:10px; }
}

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

/* ---------- Páginas de texto (privacidad) ---------- */
.legal{ padding-block:56px 72px; max-width:74ch; }
.legal h1{
  font-size:clamp(2rem, 5vw, 3.1rem);
  font-weight:800; font-stretch:112%; letter-spacing:-.025em;
  margin:.4em 0 .2em;
}
.legal h2{
  font-size:1.15rem; font-weight:700; font-stretch:106%;
  margin:2.4em 0 .5em; padding-top:1.1em; border-top:1px solid var(--line);
}
.legal p, .legal li{ color:var(--text-soft); line-height:1.65; }
.legal p{ margin:.7em 0; }
.legal ul{ margin:.7em 0; padding-left:1.1em; display:flex; flex-direction:column; gap:.55em; }
.legal li::marker{ color:var(--accent); }
.legal a{ color:var(--text); text-decoration:underline; text-underline-offset:3px; }
.legal a:hover{ color:var(--accent); }
.legal__fecha{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-soft);
}

/* Cuando Google no tiene aviso para ese espacio marca el <ins> como
   "unfilled". Sin esto quedaría un recuadro vacío con el cartel de
   Publicidad encima, que es peor que no mostrar nada. */
.ad:has(ins[data-ad-status="unfilled"]){ display:none; }

/* ---------- Notas y guías ---------- */
.nota__bajada{
  font-size:1.15rem; line-height:1.6; color:var(--text);
  border-left:2px solid var(--accent); padding-left:18px; margin:1.4em 0 0;
}
.nota__ad{ margin:34px 0; }
.nota__cierre{
  margin-top:2.6em; padding-top:1.4em; border-top:1px solid var(--text);
  color:var(--text);
}

.tabla-envoltura{ overflow-x:auto; margin:1.2em 0; }
.nota table{
  width:100%; border-collapse:collapse; font-size:.95rem;
  min-width:34ch;
}
.nota th{
  text-align:left; padding:10px 14px 10px 0;
  border-bottom:1px solid var(--text);
  font-family:var(--mono); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-soft); font-weight:500;
}
.nota td{
  padding:11px 14px 11px 0; border-bottom:1px solid var(--line-soft);
  color:var(--text-soft); vertical-align:top;
}
.nota td:first-child{ color:var(--text); font-weight:500; }

/* ---------- Índice de guías en la portada ---------- */
.guias{
  display:grid; gap:1px; background:var(--line);
  /* Son cuatro notas: 2x2 se ve parejo y 4 en línea sólo cuando entra.
     Con auto-fit quedaban 3 y una suelta, con un hueco al costado. */
  grid-template-columns:repeat(2, 1fr);
  border:1px solid var(--line);
}
.guia{
  display:flex; flex-direction:column; gap:9px;
  padding:26px 24px; background:var(--surface);
  text-decoration:none; color:inherit;
}
.guia:hover{ background:var(--accent-soft); }
.guia__n{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent);
}
.guia h3{ font-size:1.05rem; font-weight:700; font-stretch:106%; margin:0; }
.guia p{ color:var(--text-soft); font-size:.92rem; line-height:1.55; margin:0; }

@media (min-width:1180px){ .guias{ grid-template-columns:repeat(4, 1fr); } }
@media (max-width:560px){ .guias{ grid-template-columns:1fr; } }