.elementor-2435 .elementor-element.elementor-element-8002351{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS */<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Entre Líneas — Detutix</title>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: #0f3460 !important; }
body { font-family: Georgia,serif; background: #0f3460 !important; color: white; min-height: 100vh; }

.site-header { position: sticky; top: 0; z-index: 500; background: #0d2137 !important; border-bottom: 1px solid rgba(255,255,255,.08); height: 68px; }
.header-inner { max-width: 1240px; margin: 0 auto; padding: 0 32px; height: 100%; display: flex; align-items: center; gap: 32px; }
.site-logo { text-decoration: none; flex-shrink: 0; }
.wordmark { font-family: Georgia,serif; font-style: italic; font-weight: normal; font-size: 36px; letter-spacing: -1px; color: #c49a3c; display: inline-block; line-height: 1; }
.wordmark strong { font-style: normal; font-weight: bold; color: #fff; }
.header-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-link { color: rgba(255,255,255,.65); text-decoration: none; font-size: 13px; font-weight: 500; padding: 7px 13px; border-radius: 6px; font-family: -apple-system,sans-serif; transition: all .2s; white-space: nowrap; }
.nav-link:hover, .nav-link.active { color: #fff; background: rgba(255,255,255,.09); }
.nav-dd { position: relative; }
.nav-dd-toggle { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.nav-dd-toggle svg { width: 11px; height: 11px; fill: none; stroke: currentColor; transition: transform .2s; }
.nav-dd:hover .nav-dd-toggle svg { transform: rotate(180deg); }
.dd-menu { position: absolute; top: 100%; right: 0; padding-top: 10px; opacity: 0; visibility: hidden; pointer-events: none; transition: all .2s ease; }
.nav-dd:hover .dd-menu { opacity: 1; visibility: visible; pointer-events: auto; }
.dd-menu-inner { background: #fff !important; border-radius: 12px; min-width: 220px; padding: 8px; box-shadow: 0 12px 40px rgba(13,33,55,.18); border: 1px solid #ddd4c5; }
.dd-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: #1a3a5c !important; font-size: 13px; font-weight: 500; font-family: -apple-system,sans-serif; transition: background .15s; }
.dd-item:hover { background: #f4efe6 !important; }
.dd-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.hamburger { display: none; margin-left: auto; background: none; border: none; cursor: pointer; padding: 6px; flex-direction: column; gap: 5px; }
.hamburger span { display: block; width: 22px; height: 2px; background: rgba(255,255,255,.7); border-radius: 2px; }
.mobile-menu { display: none; position: fixed; inset: 0; background: #0d2137 !important; z-index: 900; padding: 80px 32px 48px; flex-direction: column; gap: 4px; }
.mobile-menu.open { display: flex; }
.mobile-menu a { color: rgba(255,255,255,.7); text-decoration: none; font-size: 20px; font-family: Georgia,serif; font-style: italic; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.07); transition: color .2s; }
.mobile-menu a:hover { color: #c49a3c; }
.mobile-close { position: absolute; top: 22px; right: 26px; background: none; border: none; color: rgba(255,255,255,.5); font-size: 26px; cursor: pointer; }

.el-hero { background: linear-gradient(135deg,#0f3460,#16213e,#1a1a2e) !important; padding: 80px 32px 60px; text-align: center; }
.hero-label { font-family: -apple-system,sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #f39c12; margin-bottom: 16px; }
.hero-title { font-size: clamp(2.5rem,6vw,4.5rem); font-weight: bold; color: #f39c12; margin-bottom: 20px; line-height: 1.1; }
.hero-sub { font-size: 1.1rem; color: rgba(255,255,255,.75); line-height: 1.7; font-style: italic; max-width: 600px; margin: 0 auto; }

.cards-section { background: #0f3460 !important; padding: 40px 20px 60px; }
.hd-grid { max-width: 1200px; margin: 0 auto; display: flex !important; flex-direction: column !important; gap: 20px; }

.hd-card { border-radius: 12px !important; overflow: hidden !important; cursor: pointer; transition: transform .25s, box-shadow .25s; min-height: 220px; }
.hd-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.25); }
.hd-card.hd-open { cursor: default; transform: none; box-shadow: 0 20px 60px rgba(0,0,0,.3); }

.card-rojo   { background: linear-gradient(145deg,#6b0f1a,#b91c3a) !important; }
.card-teal   { background: linear-gradient(145deg,#0f3460,#16637a) !important; }
.card-dorado { background: linear-gradient(145deg,#c47a1e,#e8a84a) !important; }
.card-verde  { background: linear-gradient(145deg,#1a5c3a,#2d9c6a) !important; }

.hd-front { padding: 28px; display: flex !important; flex-direction: column !important; height: 100%; min-height: 220px; }
.hd-card.hd-open .hd-front { display: none !important; }
.hd-tag { font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 14px; font-family: -apple-system,sans-serif; }
.hd-title { font-size: 20px; color: #fff !important; line-height: 1.3; margin-bottom: 10px; flex: 1; font-weight: 700; }
.hd-author { font-size: 13px; color: rgba(255,255,255,.55); font-style: italic; margin-bottom: 12px; font-family: -apple-system,sans-serif; }
.hd-preview { font-size: 14px; color: rgba(255,255,255,.7); line-height: 1.6; margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-family: -apple-system,sans-serif; }
.hd-cta { font-size: 12px; color: rgba(255,255,255,.8) !important; letter-spacing: 1px; text-transform: uppercase; margin-top: auto; font-family: -apple-system,sans-serif; }

.hd-expanded { display: none; padding: 44px; gap: 50px; align-items: start; }
.hd-card.hd-open .hd-expanded { display: grid !important; grid-template-columns: 1fr 2fr !important; }
.hd-exp-tag { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 12px; font-family: -apple-system,sans-serif; }
.hd-exp-title { font-size: 30px; color: #fff !important; line-height: 1.2; margin-bottom: 10px; font-weight: 700; }
.hd-exp-author { font-size: 15px; color: rgba(255,255,255,.5); font-style: italic; margin-bottom: 20px; font-family: -apple-system,sans-serif; }
.hd-close { display: inline-block; margin-top: 20px; font-size: 12px; color: rgba(255,255,255,.5); letter-spacing: 1px; text-transform: uppercase; cursor: pointer; background: none !important; border: none; padding: 0; transition: color .2s; font-family: -apple-system,sans-serif; }
.hd-close:hover { color: #fff; }
.hd-exp-text { font-size: 20px; line-height: 1.85; color: rgba(255,255,255,.85); font-weight: 300; }
.hd-exp-text p { margin-bottom: 18px; }

.el-footer { background: #0d2137 !important; }
.footer-welcome { background: linear-gradient(135deg,#0f3460,#16213e) !important; padding: 60px 32px; text-align: center; }
.fw-inner { max-width: 580px; margin: 0 auto; }
.fw-inner h2 { font-family: Georgia,serif; font-style: italic; font-weight: normal; font-size: 36px; color: #fff; line-height: 1.2; margin-bottom: 12px; }
.fw-inner h2 strong { font-style: normal; font-weight: bold; color: #c49a3c; }
.fw-inner p { color: rgba(255,255,255,.7); font-size: 16px; line-height: 1.7; margin-bottom: 26px; font-family: -apple-system,sans-serif; }
.btn-fw { display: inline-flex; align-items: center; gap: 8px; padding: 12px 26px; border-radius: 99px; background: #fff !important; color: #0f3460 !important; font-size: 14px; font-weight: 600; text-decoration: none; transition: all .22s; font-family: -apple-system,sans-serif; }
.btn-fw:hover { background: #c49a3c !important; color: #0d2137 !important; transform: translateY(-2px); }
.footer-body { max-width: 1240px; margin: 0 auto; padding: 52px 32px 44px; display: grid !important; grid-template-columns: 1.8fr 1fr 1fr !important; gap: 52px; border-bottom: 1px solid rgba(255,255,255,.07); background: #0d2137 !important; }
.f-logo { font-family: Georgia,serif; font-style: italic; font-weight: normal; font-size: 38px; letter-spacing: -1px; color: #c49a3c; text-decoration: none; display: block; margin-bottom: 8px; line-height: 1; }
.f-logo strong { font-style: normal; font-weight: bold; color: #fff; }
.f-tagline { font-size: 13px; color: rgba(255,255,255,.35); font-style: italic; line-height: 1.6; max-width: 32ch; }
.f-note { margin-top: 18px; font-size: 12px; color: rgba(255,255,255,.25); line-height: 1.65; max-width: 34ch; font-family: -apple-system,sans-serif; }
.f-col-title { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #c49a3c; margin-bottom: 14px; font-family: -apple-system,sans-serif; }
.f-links { display: flex !important; flex-direction: column !important; gap: 9px; }
.f-links a { color: rgba(255,255,255,.45) !important; font-size: 13px; text-decoration: none; transition: color .2s; font-family: -apple-system,sans-serif; }
.f-links a:hover { color: rgba(255,255,255,.85) !important; }
.footer-bottom { max-width: 1240px; margin: 0 auto; padding: 18px 32px 28px; display: flex !important; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.f-copy { font-size: 12px; color: rgba(255,255,255,.22); font-family: -apple-system,sans-serif; }
.f-legal { display: flex !important; gap: 18px; }
.f-legal a { font-size: 12px; color: rgba(255,255,255,.22) !important; text-decoration: none; transition: color .2s; font-family: -apple-system,sans-serif; }
.f-legal a:hover { color: rgba(255,255,255,.5) !important; }

@media (max-width: 767px) {
  .header-nav { display: none !important; } .hamburger { display: flex !important; }
  .hd-card.hd-open .hd-expanded { grid-template-columns: 1fr !important; }
  .footer-body { grid-template-columns: 1fr !important; padding: 40px 20px; }
  .footer-bottom { padding: 16px 20px 24px; }
  .footer-welcome { padding: 48px 20px; } .fw-inner h2 { font-size: 28px; }
}
@media (max-width: 1024px) {
  .footer-body { grid-template-columns: 1fr 1fr !important; }
  .footer-body > div:first-child { grid-column: 1/-1; }
}
</style>
</head>
<body>

<header class="site-header">
  <div class="header-inner">
    <a class="site-logo" href="https://detutix.cl"><span class="wordmark">Detu<strong>tix</strong></span></a>
    <nav class="header-nav">
      <a class="nav-link" href="https://detutix.cl">Inicio</a>
      <div class="nav-dd">
        <a class="nav-link nav-dd-toggle" href="#">Categorías <svg viewBox="0 0 24 24" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg></a>
        <div class="dd-menu"><div class="dd-menu-inner">
          <a class="dd-item" href="https://detutix.cl/ideas"><span class="dd-dot" style="background:#7a2d6a"></span>Ideas para Hoy</a>
          <a class="dd-item" href="https://detutix.cl/energia"><span class="dd-dot" style="background:#c4622a"></span>Energía en Movimiento</a>
          <a class="dd-item" href="https://detutix.cl/mentes"><span class="dd-dot" style="background:#2d3675"></span>Mentes Imparables</a>
          <a class="dd-item" href="https://detutix.cl/mascotas"><span class="dd-dot" style="background:#7a4516"></span>Mascotas</a>
          <a class="dd-item" href="https://detutix.cl/cuerpo-bienestar"><span class="dd-dot" style="background:#2d6b4a"></span>Cuerpo y Bienestar</a>
          <a class="dd-item" href="https://detutix.cl/lista-deseos"><span class="dd-dot" style="background:#c49a3c"></span>Lista de deseos</a>
        </div></div>
      </div>
      <a class="nav-link active" href="https://detutix.cl/entre-lineas">Entre Líneas</a>
      <a class="nav-link" href="https://detutix.cl/contacto">Sobre Detutix</a>
    </nav>
    <button class="hamburger" aria-label="Abrir menú" onclick="document.querySelector('.mobile-menu').classList.add('open')">
      <span></span><span></span><span></span>
    </button>
  </div>
</header>

<div class="mobile-menu">
  <button class="mobile-close" onclick="document.querySelector('.mobile-menu').classList.remove('open')">&#10005;</button>
  <a href="https://detutix.cl">Inicio</a>
  <a href="https://detutix.cl/ideas">Ideas para Hoy</a>
  <a href="https://detutix.cl/energia">Energía en Movimiento</a>
  <a href="https://detutix.cl/mentes">Mentes Imparables</a>
  <a href="https://detutix.cl/mascotas">Mascotas</a>
  <a href="https://detutix.cl/cuerpo-bienestar">Cuerpo y Bienestar</a>
  <a href="https://detutix.cl/lista-deseos">Lista de deseos</a>
  <a href="https://detutix.cl/entre-lineas" style="color:#c49a3c">Entre Líneas</a>
  <a href="https://detutix.cl/contacto">Sobre Detutix</a>
</div>

<section class="el-hero">
  <p class="hero-label">CATEGORÍA</p>
  <h1 class="hero-title">Entre Líneas</h1>
  <p class="hero-sub">Libros que cambiaron algo. Cosas que uso y quiero compartir. Reflexiones que no caben en ninguna categoría. Datos que no pude guardar para mi sola.</p>
</section>

<div class="cards-section">
<div class="hd-grid">

  <!-- FILA 1: 2fr + 1fr — inline style para ganarle a Elementor -->
  <div class="hd-row" style="display:grid;grid-template-columns:2fr 1fr;gap:20px;">
    <div class="hd-card card-rojo" onclick="hdToggle(this)">
      <div class="hd-front">
        <span class="hd-tag">Libro</span>
        <h2 class="hd-title">Robar como un artista</h2>
        <p class="hd-author">Austin Kleon</p>
        <p class="hd-preview">Este libro me dio permiso para crear sin miedo. La idea central es que toda creatividad es una cadena de influencias…</p>
        <span class="hd-cta">Leer →</span>
      </div>
      <div class="hd-expanded">
        <div class="hd-exp-left">
          <p class="hd-exp-tag">Libro</p>
          <h2 class="hd-exp-title">Robar como un artista</h2>
          <p class="hd-exp-author">Austin Kleon</p>
          <button class="hd-close" onclick="hdCerrar(event,this)">✕ Cerrar</button>
        </div>
        <div class="hd-exp-right">
          <div class="hd-exp-text"><p>Este libro me dio permiso para crear sin miedo. La idea central es que toda creatividad es una cadena de influencias — y eso, lejos de ser trampa, es el proceso natural. Lo releo cada vez que me bloqueo.</p></div>
        </div>
      </div>
    </div>
    <div class="hd-card card-teal" onclick="hdToggle(this)">
      <div class="hd-front">
        <span class="hd-tag">Reflexión</span>
        <h2 class="hd-title">Ver lo que otros no ven es un hábito</h2>
        <p class="hd-preview">No es talento especial ni don innato. Es prestar atención de manera distinta. Parar cuando todos siguen…</p>
        <span class="hd-cta">Leer →</span>
      </div>
      <div class="hd-expanded">
        <div class="hd-exp-left">
          <p class="hd-exp-tag">Reflexión</p>
          <h2 class="hd-exp-title">Ver lo que otros no ven es un hábito</h2>
          <button class="hd-close" onclick="hdCerrar(event,this)">✕ Cerrar</button>
        </div>
        <div class="hd-exp-right">
          <div class="hd-exp-text"><p>No es talento especial ni don innato. Es prestar atención de manera distinta. Parar cuando todos siguen. Hacerse preguntas incómodas. Detutix nació de eso: de detenerme a mirar lo que parecía insignificante y descubrir que no lo era.</p></div>
        </div>
      </div>
    </div>
  </div>

  <!-- FILA 2: 1fr + 2fr -->
  <div class="hd-row" style="display:grid;grid-template-columns:1fr 2fr;gap:20px;">
    <div class="hd-card card-dorado" onclick="hdToggle(this)">
      <div class="hd-front">
        <span class="hd-tag">Dato curioso</span>
        <h2 class="hd-title">El magnesio y el sueño tienen más en común de lo que parece</h2>
        <p class="hd-preview">El magnesio no "te duerme" — activa el sistema nervioso parasimpático…</p>
        <span class="hd-cta">Leer →</span>
      </div>
      <div class="hd-expanded">
        <div class="hd-exp-left">
          <p class="hd-exp-tag">Dato curioso</p>
          <h2 class="hd-exp-title">El magnesio y el sueño tienen más en común de lo que parece</h2>
          <button class="hd-close" onclick="hdCerrar(event,this)">✕ Cerrar</button>
        </div>
        <div class="hd-exp-right">
          <div class="hd-exp-text"><p>El magnesio no "te duerme" — activa el sistema nervioso parasimpático, el que le dice a tu cuerpo que puede relajarse. Es la diferencia entre apagarte y soltar. Desde que lo entendí así, no me olvido de tomarlo.</p></div>
        </div>
      </div>
    </div>
    <div class="hd-card card-verde" onclick="hdToggle(this)">
      <div class="hd-front">
        <span class="hd-tag">Producto</span>
        <h2 class="hd-title">Cuaderno Leuchtturm1917</h2>
        <p class="hd-preview">No tengo link de afiliado para esto. Lo recomiendo igual porque lo uso cada día. Papel que no sangra, tapa dura, páginas numeradas…</p>
        <span class="hd-cta">Leer →</span>
      </div>
      <div class="hd-expanded">
        <div class="hd-exp-left">
          <p class="hd-exp-tag">Producto</p>
          <h2 class="hd-exp-title">Cuaderno Leuchtturm1917</h2>
          <button class="hd-close" onclick="hdCerrar(event,this)">✕ Cerrar</button>
        </div>
        <div class="hd-exp-right">
          <div class="hd-exp-text"><p>No tengo link de afiliado para esto. Lo recomiendo igual porque lo uso cada día. Papel que no sangra, tapa dura, páginas numeradas. Un cuaderno que respeta lo que escribes. Si tomas notas en serio, es el que buscar.</p></div>
        </div>
      </div>
    </div>
  </div>

  <!-- FILA 3: 2fr + 1fr -->
  <div class="hd-row" style="display:grid;grid-template-columns:2fr 1fr;gap:20px;">
    <div class="hd-card card-rojo" onclick="hdToggle(this)">
      <div class="hd-front">
        <span class="hd-tag">Libro</span>
        <h2 class="hd-title">El mundo de Sofía</h2>
        <p class="hd-author">Jostein Gaarder</p>
        <p class="hd-preview">Lo leí a los 15 y cambió la forma en que hago preguntas. Filosofía contada como aventura…</p>
        <span class="hd-cta">Leer →</span>
      </div>
      <div class="hd-expanded">
        <div class="hd-exp-left">
          <p class="hd-exp-tag">Libro</p>
          <h2 class="hd-exp-title">El mundo de Sofía</h2>
          <p class="hd-exp-author">Jostein Gaarder</p>
          <button class="hd-close" onclick="hdCerrar(event,this)">✕ Cerrar</button>
        </div>
        <div class="hd-exp-right">
          <div class="hd-exp-text"><p>Lo leí a los 15 y cambió la forma en que hago preguntas. Filosofía contada como aventura. La curiosidad como actitud de vida. Cada vez que siento que doy las cosas por sabidas, recuerdo a Sofía abriendo ese primer sobre.</p></div>
        </div>
      </div>
    </div>
    <div class="hd-card card-teal" onclick="hdToggle(this)">
      <div class="hd-front">
        <span class="hd-tag">Reflexión</span>
        <h2 class="hd-title">La curiosidad no tiene fecha de vencimiento</h2>
        <p class="hd-preview">Hay una idea instalada de que cierta edad "ya pasó". Para aprender. Para cambiar. Para descubrir…</p>
        <span class="hd-cta">Leer →</span>
      </div>
      <div class="hd-expanded">
        <div class="hd-exp-left">
          <p class="hd-exp-tag">Reflexión</p>
          <h2 class="hd-exp-title">La curiosidad no tiene fecha de vencimiento</h2>
          <button class="hd-close" onclick="hdCerrar(event,this)">✕ Cerrar</button>
        </div>
        <div class="hd-exp-right">
          <div class="hd-exp-text"><p>Hay una idea instalada de que cierta edad "ya pasó". Para aprender. Para cambiar. Para descubrir. Es mentira. La curiosidad es lo más anti-edad que existe — y es la razón por la que este sitio existe.</p></div>
        </div>
      </div>
    </div>
  </div>

</div>
</div>

<footer class="el-footer">
  <div class="footer-welcome"><div class="fw-inner">
    <h2>¿Seguimos explorando?<br><strong>Hay más por descubrir.</strong></h2>
    <p>Cada categoría tiene sus propios hallazgos. Sin algoritmos, sin patrocinios ocultos.</p>
    <a class="btn-fw" href="https://detutix.cl">Volver al inicio</a>
  </div></div>
  <div class="footer-body">
    <div>
      <a class="f-logo" href="https://detutix.cl">Detu<strong>tix</strong></a>
      <p class="f-tagline">"Ver lo que otros no ven."</p>
      <p class="f-note">Un sitio hecho con criterio real, desde Viña del Mar, Chile.</p>
    </div>
    <div>
      <p class="f-col-title">Categorías</p>
      <div class="f-links">
        <a href="https://detutix.cl/ideas">Ideas para Hoy</a>
        <a href="https://detutix.cl/energia">Energía en Movimiento</a>
        <a href="https://detutix.cl/mentes">Mentes Imparables</a>
        <a href="https://detutix.cl/mascotas">Mascotas</a>
        <a href="https://detutix.cl/cuerpo-bienestar">Cuerpo y Bienestar</a>
        <a href="https://detutix.cl/lista-deseos">Lista de deseos</a>
      </div>
    </div>
    <div>
      <p class="f-col-title">El sitio</p>
      <div class="f-links">
        <a href="https://detutix.cl/entre-lineas">Entre Líneas</a>
        <a href="https://detutix.cl/contacto">Sobre Detutix</a>
        <a href="https://detutix.cl/contacto#privacidad">Privacidad</a>
        <a href="https://detutix.cl/contacto#afiliados">Afiliados</a>
      </div>
    </div>
  </div>
  <div class="footer-bottom">
    <p class="f-copy">&copy; 2026 Detutix &middot; Viña del Mar, Chile &middot; Links de afiliado pueden estar presentes</p>
    <div class="f-legal">
      <a href="https://detutix.cl/contacto#privacidad">Privacidad</a>
      <a href="https://detutix.cl/contacto#afiliados">Afiliados</a>
    </div>
  </div>
</footer>

<script>
function hdToggle(card) {
  var row = card.closest('.hd-row');
  var wasOpen = card.classList.contains('hd-open');
  // Guardar el estilo original de la fila
  var originalCols = row.getAttribute('data-cols') || row.style.gridTemplateColumns;
  if (!row.getAttribute('data-cols')) row.setAttribute('data-cols', row.style.gridTemplateColumns);
  document.querySelectorAll('.hd-card.hd-open').forEach(function(c) { c.classList.remove('hd-open'); });
  document.querySelectorAll('.hd-row').forEach(function(r) {
    var orig = r.getAttribute('data-cols');
    if (orig) r.style.gridTemplateColumns = orig;
  });
  if (!wasOpen) {
    card.classList.add('hd-open');
    row.style.gridTemplateColumns = '1fr';
    setTimeout(function() { card.scrollIntoView({ behavior: 'smooth', block: 'start' }); }, 50);
  }
}
function hdCerrar(e, btn) {
  e.stopPropagation();
  var card = btn.closest('.hd-card');
  var row = card.closest('.hd-row');
  card.classList.remove('hd-open');
  var orig = row.getAttribute('data-cols');
  if (orig) row.style.gridTemplateColumns = orig;
}
</script>
</body>
</html>/* End custom CSS */