/* Guías de Tratto (/guias/<tema>/).
   Misma identidad que la app y la calculadora: noche + verde bosque + latón
   como sello. Cabecera oscura, hoja clara para leer y listas numeradas con
   sellos de latón unidos por un hilo (el mismo gesto del .hilo de la app). */
:root{
  --noche:#0C2620; --noche-2:#123830; --noche-3:#1B4B40;
  --claro:#FCFBF8; --claro-2:#F2F0E9; --claro-3:#E8E5DB;
  --tinta:#0E1815; --tinta-2:#34443E; --gris:#68766F; --gris-2:#94A19B;
  --verde:#1E5D49; --verde-vivo:#2B7E62; --verde-luz:#8FD9BC;
  --laton:#C9A227; --laton-osc:#8A6E10; --laton-luz:#F3E7BC;
  --linea:#E0DCD0; --linea-fuerte:#CFC9BA;
  --alerta:#A63A1C; --alerta-luz:#F9EAE4;
  --f-disp:"IBM Plex Sans Condensed","Arial Narrow",system-ui,sans-serif;
  --f-texto:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--noche);color:var(--tinta);font:16px/1.55 var(--f-texto);-webkit-font-smoothing:antialiased;
     padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
a{color:var(--verde);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--verde-vivo)}
:focus-visible{outline:3px solid var(--laton);outline-offset:2px;border-radius:4px}
::selection{background:var(--verde-luz);color:var(--noche)}
[hidden]{display:none!important}

.marco{max-width:1080px;margin:0 auto;padding:0 18px}

/* Cabecera (igual que la calculadora) */
.tope{display:flex;align-items:center;gap:10px;padding-top:18px}
.tope a{display:flex;align-items:center;gap:10px;text-decoration:none}
.tope img{width:30px;height:30px;border-radius:8px}
.tope b{font:700 1.2rem/1 var(--f-disp);color:var(--claro);letter-spacing:.01em}

.hero{padding-top:30px;padding-bottom:32px;color:var(--claro)}
.hero-in{max-width:760px}
.ceja{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 14px;
      font:500 .74rem/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--laton)}
.ceja .para{color:var(--verde-luz)}
.ceja .sep{width:18px;height:1px;background:linear-gradient(90deg,var(--noche-3),var(--laton))}
h1{font:700 clamp(2.15rem,9.4vw,3.55rem)/1 var(--f-disp);margin:0 0 16px;letter-spacing:-.012em;text-wrap:balance}
h1 .y{display:block;color:var(--verde-luz);font-weight:600;font-size:.62em;line-height:1.08;margin-top:.28em;letter-spacing:-.005em}
.bajada{margin:0;color:#C9D6D0;font-size:1.08rem;line-height:1.6;max-width:58ch}
.datos-guia{display:flex;flex-wrap:wrap;gap:8px 18px;margin:20px 0 0;padding:0;list-style:none;
            font:500 .76rem/1.3 var(--f-mono);color:#9FB2AA;letter-spacing:.04em}
.datos-guia li{display:flex;align-items:center;gap:8px}
.datos-guia li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--laton)}

/* Hoja de lectura */
.hoja{background:var(--claro);border-radius:22px 22px 0 0}
.hoja-in{display:grid;gap:26px;padding-top:24px;padding-bottom:52px}

/* Índice: arriba en el celular (plegado), al costado y fijo en la compu */
.indice{align-self:start;background:var(--claro-2);border-radius:14px;padding:0 16px}
.indice summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;
                font:600 .74rem/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
.indice summary::-webkit-details-marker{display:none}
.indice summary::after{content:"+";font:500 1.25rem/1 var(--f-mono);color:var(--verde)}
.indice[open] summary::after{content:"\2212"}
.indice ol{list-style:none;margin:0 0 12px;padding:0;display:grid}
.indice a{display:block;padding:8px 0;color:var(--tinta);text-decoration:none;font-size:.93rem;line-height:1.35;border-top:1px solid var(--claro-3)}
.indice li:first-child a{border-top:0}
.indice a:hover{color:var(--verde)}

/* Artículo */
.articulo{min-width:0;max-width:700px}
.articulo > p{margin:0 0 1.1em;font-size:1.06rem;line-height:1.7}
.articulo h2{font:700 clamp(1.6rem,6.2vw,2.05rem)/1.08 var(--f-disp);margin:2.1em 0 .65em;letter-spacing:-.005em;text-wrap:balance;scroll-margin-top:20px}
.articulo h2::before{content:"";display:block;width:44px;height:3px;border-radius:2px;margin-bottom:14px;
                     background:linear-gradient(90deg,var(--verde),var(--laton))}
.articulo > :first-child{margin-top:0}
.n{font-family:var(--f-mono);font-weight:600;font-size:.92em;letter-spacing:-.01em;white-space:nowrap}
.fuente{font-family:var(--f-mono);font-size:.84em;color:var(--gris)}

/* Elemento firma: pasos con sello de latón unidos por un hilo */
.pasos{list-style:none;margin:1.4em 0 1.8em;padding:0}
.pasos > li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;padding-bottom:24px}
.pasos > li::before{content:"";position:absolute;left:21px;top:50px;bottom:6px;width:2px;border-radius:1px;
                    background:linear-gradient(180deg,var(--verde-luz),var(--laton-luz))}
.pasos > li:last-child{padding-bottom:0}
.pasos > li:last-child::before{display:none}
.sello-n{grid-row:1 / span 6;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
         font:600 1rem/1 var(--f-mono);color:var(--laton-osc);background:#fff;border:2px solid var(--laton);
         box-shadow:inset 0 0 0 3px var(--laton-luz)}
.pasos h3{font:600 1.1rem/1.3 var(--f-texto);margin:10px 0 5px}
.pasos p{margin:0 0 .6em;color:var(--tinta-2);line-height:1.65}
.pasos p:last-child{margin-bottom:0}
.pasos ul{list-style:none;margin:.2em 0 0;padding:0;display:grid;gap:8px}
.pasos ul li{position:relative;padding-left:20px;color:var(--tinta-2);line-height:1.55}
.pasos ul li::before{content:"";position:absolute;left:2px;top:.72em;width:10px;height:2px;border-radius:1px;background:var(--laton)}

/* Fichas de precios */
.fichas{list-style:none;margin:1.2em 0;padding:0;display:grid;gap:12px}
.fichas li{background:#fff;border:1.5px solid var(--linea);border-radius:16px;padding:16px 18px;line-height:1.62;color:var(--tinta-2)}
.fichas strong{display:block;font:700 1.3rem/1.1 var(--f-disp);color:var(--tinta);margin-bottom:6px}
.fichas .n{color:var(--verde)}
.articulo > p.nota{font-size:.9rem;color:var(--gris);line-height:1.6;margin:0 0 1.2em}

/* Destacado */
.truco{margin:1.4em 0;padding:16px 18px;border-radius:16px;background:rgba(201,162,39,.13);
       border:1.5px solid rgba(201,162,39,.45);line-height:1.65}
.truco p{margin:0}
.truco strong{color:var(--laton-osc)}

/* Listas */
.lista{list-style:none;margin:.6em 0 1.4em;padding:0;display:grid;gap:11px}
.lista li{position:relative;padding-left:28px;line-height:1.6}
.lista li::before{content:"";position:absolute;left:3px;top:.42em;width:12px;height:12px;border-radius:50%;
                  border:2.5px solid var(--verde-vivo);box-sizing:border-box}
.lista.preguntas{background:#fff;border:1.5px solid var(--linea);border-radius:16px;padding:18px 18px 18px 16px}
.lista.alerta li::before{content:"!";border:0;width:16px;height:16px;left:1px;top:.22em;border-radius:50%;
                         background:var(--laton-luz);color:var(--laton-osc);font:700 .72rem/16px var(--f-mono);text-align:center}
.lista.errores li::before{content:"";border:0;width:12px;height:12px;left:3px;top:.45em;border-radius:0;
                          background:linear-gradient(45deg,transparent 42%,var(--alerta) 42% 58%,transparent 58%),
                                     linear-gradient(-45deg,transparent 42%,var(--alerta) 42% 58%,transparent 58%)}
.lista.tratto{background:rgba(30,93,73,.07);border:1.5px solid rgba(30,93,73,.22);border-radius:16px;padding:18px 18px 18px 16px}
.lista.tratto li::before{border:0;width:16px;height:16px;left:1px;top:.25em;border-radius:50%;background:var(--verde)}
.lista.tratto li::after{content:"";position:absolute;left:6px;top:calc(.25em + 4px);width:4px;height:7px;
                        border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* Tarjetas por rubro */
.rubros{display:grid;gap:12px;margin:1em 0 1.6em}
.rubro{background:#fff;border:1.5px solid var(--linea);border-radius:16px;padding:16px 18px}
.rubro h3{font:700 1.3rem/1.1 var(--f-disp);margin:0}
.rubro .cuales{display:block;font:500 .76rem/1.45 var(--f-mono);color:var(--gris);margin:5px 0 0;letter-spacing:.01em}
.rubro p{margin:10px 0 0;font-size:.98rem;line-height:1.62;color:var(--tinta-2)}
@media (min-width:640px){
  .rubros{grid-template-columns:1fr 1fr}
  .rubros > .rubro:last-child:nth-child(odd){grid-column:1 / -1}
}

/* Filas rubro → qué preguntar */
.filas{margin:1em 0 1.2em;padding:0;display:grid;gap:0;background:#fff;border:1.5px solid var(--linea);border-radius:16px;overflow:hidden}
.filas > div{display:grid;gap:4px;padding:13px 18px;border-top:1px solid var(--claro-3)}
.filas > div:first-child{border-top:0}
.filas dt{font:600 .74rem/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--verde)}
.filas dd{margin:0;line-height:1.6;color:var(--tinta-2)}
@media (min-width:560px){.filas > div{grid-template-columns:118px minmax(0,1fr);gap:14px}.filas dt{padding-top:3px}}

/* Modelo para copiar */
.modelo{margin:1.2em 0 1.8em;background:#fff;border:1.5px solid var(--linea);border-radius:18px;overflow:hidden;
        box-shadow:0 2px 4px rgba(14,24,21,.04),0 10px 28px rgba(14,24,21,.06)}
.modelo-barra{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 10px 10px 18px;
              background:var(--noche);color:var(--claro);font:500 .74rem/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase}
.modelo-barra span{display:flex;align-items:center;gap:8px}
.modelo-barra span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--laton)}
.copiar{flex:none;border:0;border-radius:10px;padding:9px 14px;background:var(--laton);color:#1A1405;cursor:pointer;
        font:600 .86rem/1 var(--f-texto);letter-spacing:0;text-transform:none;box-shadow:inset 0 -2px 0 rgba(0,0,0,.16)}
.copiar:hover{background:#D6B03A}
.modelo-cuerpo{padding:18px;display:grid;gap:8px;line-height:1.62;color:var(--tinta-2)}
.modelo-cuerpo p{margin:0}
.modelo-cuerpo .bloque{display:grid;gap:6px;padding:12px 0;border-top:1px dashed var(--linea-fuerte);border-bottom:1px dashed var(--linea-fuerte);margin:6px 0}
.modelo-cuerpo strong{color:var(--tinta)}
.hueco{font-family:var(--f-mono);font-size:.86em;background:var(--laton-luz);color:#5E4B08;border-radius:5px;padding:1px 5px;
       -webkit-box-decoration-break:clone;box-decoration-break:clone}
.copiado{font:500 .84rem/1.4 var(--f-texto);color:var(--verde);margin:0;padding:0 18px 14px}

/* Ejemplos de presupuesto por rubro */
.rubro blockquote{margin:10px 0 0;font-size:.98rem;line-height:1.62;color:var(--tinta-2)}

/* Cierre con llamado */
.cierre{margin:2.4em 0 0;background:var(--noche);color:var(--claro);border-radius:20px;padding:24px 20px;display:grid;gap:18px}
.cierre h2{color:var(--claro);margin:0!important}
.cierre-in{display:grid;gap:18px}
.cierre .paso{display:grid;gap:12px;align-content:start}
.cierre p{margin:0;color:#C9D6D0;font-size:1rem;line-height:1.6}
@media (min-width:640px){.cierre{padding:30px 28px}.cierre-in.dos{grid-template-columns:1fr 1fr;gap:24px}}
.boton{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:0;border-radius:14px;padding:16px 18px;
       background:var(--verde);color:#fff;font:600 1.06rem/1.2 var(--f-texto);cursor:pointer;text-decoration:none;
       box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.boton:hover{background:var(--verde-vivo);color:#fff}
.boton.laton{background:var(--laton);color:#1A1405}
.boton.laton:hover{background:#D6B03A;color:#1A1405}
.boton.claro{background:var(--claro);color:var(--verde)}
.boton.claro:hover{background:#fff;color:var(--verde)}
.boton::after{content:"\2192";font-family:var(--f-mono);font-weight:500}

.articulo > p.fuentes{margin:26px 0 0;padding-top:16px;font:500 .8rem/1.6 var(--f-mono);color:var(--gris);position:relative}
.fuentes::before{content:"";position:absolute;top:0;left:0;width:44px;height:2px;border-radius:1px;background:linear-gradient(90deg,var(--verde),var(--laton))}

/* Pie (igual que la calculadora) */
.pie{padding-top:24px;padding-bottom:36px;color:#9FB2AA;font-size:.84rem;display:grid;gap:10px}
.pie p{margin:0}
.pie a{color:var(--verde-luz)}
.pie .otra{font:500 .76rem/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--laton)}

@media (min-width:1040px){
  .hero{padding-top:48px;padding-bottom:44px}
  .hoja-in{grid-template-columns:minmax(0,700px) 250px;justify-content:space-between;gap:64px;padding-top:48px;padding-bottom:72px}
  .articulo{grid-column:1;grid-row:1}
  .indice{grid-column:2;grid-row:1;position:sticky;top:24px;background:transparent;border-radius:0;padding:0 0 0 20px;
          border-left:2px solid transparent;border-image:linear-gradient(180deg,var(--verde-luz),var(--laton)) 1}
  .indice summary{cursor:default;padding-top:4px}
  .indice summary::after{display:none}
  .indice a{border-top:0;padding:7px 0}
}
@media print{
  body{background:#fff}
  .tope,.indice,.cierre .boton,.copiar,.pie{display:none}
  .hero{color:var(--tinta)}
  .bajada{color:var(--tinta-2)}
}