/* ── LOS DOS @import QUE ESTABAN ACÁ ARRIBA — 03/09/2026 ──────────────
   Esta hoja la cargan TODAS las páginas del sitio, y arrancaba con dos
   pedidos a servidores ajenos que bloqueaban el dibujado antes de que se
   viera una letra. Medido con PageSpeed: 320 ms el de jsDelivr, 120 ms el
   de Google.

   · @tabler/icons-webfont — SE BORRÓ. 37 KiB de CSS para una tipografía
     de íconos que no usa ni una sola página: no hay una clase `ti ti-…`
     en todo el proyecto, ni en public ni en admin/. (Lo que confundía la
     búsqueda era la palabra «tablero».)

   · Playfair Display + EB Garamond — SE MUDÓ A assets/admin.css. Son las
     tipografías del diseño terracota, que vive en las variables
     --font-display y --font-body de acá abajo. Desde el 08/08 la piel
     «archivo» (pulpa_archivo.css) se carga última y las pisa: verificado
     en el navegador —portada, buscador y panel— que no se dibuja un solo
     renglón con ellas. Se mudó en vez de borrarse porque las variables
     siguen ahí y admin/ es el único lugar donde podría asomar. */

/* ============================================================
   PULPA — Rediseño terracota / Playfair + EB Garamond
   ============================================================ */

:root{
  /* Paleta terracota */
  --color-fondo:      #f7f3ed;
  --color-oscuro:     #1a1208;
  --color-terracota:  #c4503c;
  --color-secundario: #8b3a2a;
  --color-crema:      #fff9f5;
  --color-borde:      #ead5c8;
  --color-dorado:     #c9a030;
  --color-neutro:     #a09080;

  /* Tipografía */
  --font-display: 'Playfair Display', serif;
  --font-body:    'EB Garamond', serif;

  /* Aliases — compatibilidad con clases anteriores */
  --dark:       #1a1208;
  --dark2:      #2a1e14;
  --cream:      #f7f3ed;
  --paper:      #fff9f5;
  --paper2:     #fff9f5;
  --ink:        #1a1208;
  --muted:      #a09080;
  --soft:       #a09080;
  --gold:       #c9a030;
  --gold-bright:#e0b84a;
  --gold-deep:  #8b6a10;
  --line:       #ead5c8;
  --line-soft:  #f0e0d4;
  --green:      #cfe2cf;
  --green-ink:  #33603e;
  --radius:     20px;
  --radius-lg:  26px;
}

*{box-sizing:border-box}
body{margin:0;background:var(--color-fondo);color:var(--color-oscuro);
  font-family:var(--font-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--font-display)}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.wrap{width:min(1180px,calc(100% - 48px));margin:0 auto}
.sans{font-family:"Helvetica Neue",Arial,sans-serif}

/* ===== Header ===== */
.site-header{height:76px;background:rgba(10,8,5,.97);
  border-bottom:1px solid rgba(199,151,73,.22);
  position:sticky;top:0;z-index:30;backdrop-filter:blur(8px)}
.header-inner{height:76px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:13px;color:#fbf2e2}
.brand-seal{width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(199,151,73,.65);display:grid;place-items:center;
  color:var(--gold-bright);font-size:21px;font-weight:700}
.brand-main{font-size:27px;font-weight:700;letter-spacing:.14em}
.brand-sub{font:13px/1 "Helvetica Neue",Arial,sans-serif;color:var(--gold);letter-spacing:.02em}
.nav{display:flex;gap:32px;color:#eee0cd;
  font:15px "Helvetica Neue",Arial,sans-serif;letter-spacing:.01em}
.nav a{padding:4px 0;border-bottom:1px solid transparent;transition:border-color .15s,color .15s}
.nav a:hover{color:#fff;border-bottom-color:var(--gold)}
.nav-cta{border:1px solid rgba(199,151,73,.4);color:var(--gold-bright);padding:5px 12px;border-radius:8px}
.nav-cta:hover{border-color:var(--gold);background:rgba(199,151,73,.12);color:var(--gold-bright)}
.nav-cuenta{display:flex;align-items:center;gap:16px}
/* > a: solo hijos directos; no afecta a links dentro de .nav-usuario */
.nav-cuenta > a{color:#eee0cd;padding:4px 0;border-bottom:1px solid transparent;transition:border-color .15s,color .15s}
.nav-cuenta > a:hover{color:#fff;border-bottom-color:var(--gold)}
/* ---- Nav de usuario logueado ---- */
.nav-usuario{display:flex;align-items:center;gap:6px;font:14px "Helvetica Neue",Arial,sans-serif}
.nav-usuario a{color:#eee0cd;padding:5px 10px;border-radius:8px;transition:background .13s,color .13s;white-space:nowrap}
.nav-usuario a:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav-usuario .nav-salir{border:1px solid rgba(199,151,73,.4);color:var(--gold-bright);padding:5px 12px;border-radius:8px}
.nav-usuario .nav-salir:hover{background:rgba(199,151,73,.12);border-color:var(--gold)}
/* Links del nav público dentro del panel mobile — ocultos en desktop */
.nav-mob{display:none}
.nav-mob-sep{display:none;border:none;height:0;border-top:1px solid rgba(255,255,255,.08);margin:4px 14px 8px}
/* ---- Hamburguesa ---- */
.nav-ham{display:none;align-items:center;justify-content:center;background:none;border:1px solid rgba(255,255,255,.15);border-radius:8px;color:#eee0cd;padding:7px 9px;cursor:pointer;transition:background .13s,color .13s;line-height:0;flex:none}
.nav-ham:hover{background:rgba(255,255,255,.08);color:#fff}
@media(max-width:720px){
  .nav-cuenta{display:flex}
  .nav-ham{display:flex}
  .nav-mob{display:flex}
  .nav-mob-sep{display:block}
  .nav-usuario{display:none;position:fixed;top:76px;left:0;right:0;background:rgba(10,8,5,.97);border-top:1px solid rgba(199,151,73,.15);flex-direction:column;align-items:stretch;padding:8px 16px 16px;gap:0;z-index:200;box-shadow:0 12px 32px rgba(0,0,0,.5)}
  .nav-usuario.open{display:flex}
  .nav-usuario a{font-size:16px;padding:13px 14px;border-radius:10px;border-bottom:1px solid rgba(255,255,255,.06);white-space:normal;color:#eee0cd}
  .nav-usuario a:last-child{border-bottom:none}
  .nav-usuario .nav-salir{margin-top:8px;border:1px solid rgba(199,151,73,.4);color:var(--gold-bright);text-align:center;border-radius:10px}
}

/* ===== Tira de categorías híbrida ===== */
.pulpa-strip-wrap{
  background:var(--color-fondo);
  border-bottom:1px solid var(--color-borde);
  position:sticky;
  top:76px;
  z-index:20;
}
.pulpa-strip{
  display:flex;
  overflow-x:auto;
  scrollbar-width:none;
  padding:0 8px;
  width:min(1180px,100%);
  margin:0 auto;
}
.pulpa-strip::-webkit-scrollbar{display:none}

.ps-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:14px 14px 10px;
  min-width:72px;
  min-height:72px;
  flex-shrink:0;
  border:none;
  border-bottom:3px solid transparent;
  background:transparent;
  cursor:pointer;
  transition:border-color .15s,color .15s;
  font-family:var(--font-body);
}
.ps-item svg{width:36px;height:36px;display:block}
.ps-item span{font-size:13px;white-space:nowrap;line-height:1}

.ps-ed{color:var(--color-oscuro)}
.ps-ed span{font-weight:600}
.ps-cat{color:var(--color-oscuro)}
.ps-cat span{font-weight:400}

.ps-item:hover{color:var(--color-oscuro);border-bottom-color:var(--color-borde)}
.ps-item.active{border-bottom-color:var(--color-terracota);color:var(--color-terracota)}
.ps-item.active span{font-weight:600}

/* ===== Hero ===== */
.hero{background:
  radial-gradient(circle at 72% 18%,rgba(199,151,73,.18),transparent 38%),
  linear-gradient(92deg,#16110b,#0a0806);color:#fff5e6}
.hero-grid{min-height:600px;padding:64px 0 52px;display:grid;
  grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.kicker{display:flex;gap:14px;align-items:center;color:var(--gold-bright);
  font:700 12px "Helvetica Neue",Arial,sans-serif;letter-spacing:.18em;margin-bottom:24px}
.kicker:before{content:"";width:38px;height:1px;background:var(--gold)}
.hero h1{font-size:clamp(42px,5.2vw,70px);line-height:.97;
  letter-spacing:-.03em;margin:0 0 22px;text-wrap:balance}
.hero-copy p{font-size:18px;line-height:1.55;
  color:#e9dac8;max-width:560px;margin:0 0 30px}
.actions{display:flex;gap:13px;flex-wrap:wrap}
.btn{min-height:52px;padding:14px 28px;border-radius:10px;border:none;
  display:inline-flex;align-items:center;justify-content:center;
  font:600 16px/1 var(--font-body);cursor:pointer;
  transition:transform .12s,opacity .15s,background .14s}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:#c4503c;color:#fff9f5}
.btn.primary:hover{background:#a83d31}
.btn.ghost{border:1px solid rgba(199,151,73,.5);color:#fff3e1;background:transparent}
.btn.ghost:hover{border-color:var(--gold);background:rgba(199,151,73,.08)}

/* ===== Dossier (ficha destacada del hero) ===== */
.public-dossier{height:526px;border-radius:var(--radius-lg);overflow:hidden;
  position:relative;border:1px solid rgba(199,151,73,.32);
  box-shadow:0 30px 72px rgba(0,0,0,.36);background:#18120d}
.empty-dossier{display:flex}
.dossier-bg{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;filter:saturate(.97) contrast(1.04)}
.dossier-shade{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.55) 54%,rgba(0,0,0,.85)),
  linear-gradient(90deg,rgba(0,0,0,.3),transparent 48%)}
.dossier-content{position:absolute;inset:0;padding:28px;display:flex;
  flex-direction:column;justify-content:space-between}
.dossier-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.chip{display:inline-flex;align-items:center;min-height:30px;padding:0 13px;
  border-radius:999px;font:700 11px "Helvetica Neue",Arial,sans-serif;
  letter-spacing:.04em;border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(10px)}
.chip-gold{background:rgba(199,151,73,.96);color:#fff9ef;border-color:transparent}
.chip-light{background:rgba(255,246,231,.9);color:#5f4524}
.dossier-main{max-width:440px}
.micro{font:700 11px "Helvetica Neue",Arial,sans-serif;color:var(--gold-bright);
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:9px}
.dossier-main h2{font-size:40px;line-height:.98;margin:0 0 12px;
  color:#fff8ed;text-wrap:balance}
.dossier-main p{font-size:15px;line-height:1.5;color:#e9ddcd;margin:0}
.dossier-bottom{display:flex;align-items:end;justify-content:space-between;gap:16px;
  border-top:1px solid rgba(255,255,255,.16);padding-top:18px}
.dossier-bottom strong{display:block;font-size:30px;line-height:1;color:#fff8ed}
.dossier-bottom .price-label{font:700 10px "Helvetica Neue",Arial,sans-serif;
  color:var(--gold-bright);letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px}
.small-cta{min-height:42px;padding:0 18px;border-radius:999px;
  background:rgba(255,255,255,.14);color:#fff8ed;
  font:700 13px "Helvetica Neue",Arial,sans-serif;display:flex;align-items:center;
  border:1px solid rgba(255,255,255,.14);transition:background .15s}
.small-cta:hover{background:rgba(255,255,255,.24)}

/* ===== Secciones ===== */
.section{padding:40px 0 24px}
.section.compact{padding:26px 0 14px}
.cream{background:var(--cream)}
.paper-bg{background:var(--paper)}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.title-line{display:flex;align-items:center;gap:14px}
.title-line.centered{justify-content:center;margin-bottom:6px}
.title-line span{width:30px;height:1px;background:var(--gold-deep)}
.title-line h2{margin:0;font-size:22px;text-transform:uppercase;
  letter-spacing:.09em;font-weight:700}
.soft-link{font:700 13px "Helvetica Neue",Arial,sans-serif;color:var(--gold-deep);
  letter-spacing:.02em}
.section-sub{text-align:center;margin:0 auto 30px;max-width:680px;
  font-size:16px;line-height:1.55;color:var(--muted)}

/* ===== Grilla de piezas ===== */
.photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.photo-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.photo-tile{height:340px;border-radius:var(--radius);overflow:hidden;position:relative;
  background:#1a120c;border:1px solid rgba(36,27,20,.1);
  box-shadow:0 10px 26px rgba(45,32,18,.07);transition:transform .18s,box-shadow .18s}
.photo-tile:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(45,32,18,.16)}
.tile-link{position:absolute;inset:0;display:block}
.photo-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .4s}
.photo-tile:hover img{transform:scale(1.04)}
.tile-shade{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.1) 40%,rgba(0,0,0,.84))}
.tile-chips{position:absolute;top:13px;left:13px;right:13px;display:flex;gap:7px;flex-wrap:wrap}
.mini-chip{display:inline-flex;align-items:center;min-height:27px;padding:0 11px;
  border-radius:999px;font:700 11px "Helvetica Neue",Arial,sans-serif;
  background:rgba(255,246,231,.9);color:#5f4524;backdrop-filter:blur(8px)}
.mini-chip.verif{background:rgba(199,151,73,.94);color:#fff9ef}
.tile-info{position:absolute;left:17px;right:17px;bottom:16px;color:#fff7ea}
.tile-info h3{font-size:23px;line-height:1.02;margin:0 0 6px;
  text-shadow:0 2px 14px rgba(0,0,0,.45);text-wrap:balance}
.tile-info p{font-size:13px;line-height:1.35;margin:0 0 9px;color:#e7d8c6}
.tile-info strong{font-size:17px;font-weight:700;color:var(--gold-bright)}

/* ===== Cómo funciona ===== */
.pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:30px}
.pillar{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 20px;transition:border-color .15s}
.pillar:hover{border-color:var(--gold)}
.pillar-ico{width:46px;height:46px;display:grid;place-items:center;border-radius:12px;
  background:#15110b;color:var(--gold-bright);font-size:20px;font-style:normal;margin-bottom:14px}
.pillar h3{font-size:20px;line-height:1.05;margin:0 0 8px}
.pillar p{font-size:15px;line-height:1.5;color:var(--muted);margin:0}
.behind{border-top:1px solid var(--line);padding-top:26px}
.behind-label{text-align:center;font:700 11px "Helvetica Neue",Arial,sans-serif;
  text-transform:uppercase;letter-spacing:.16em;color:var(--soft);margin-bottom:20px}
.behind-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.behind-item{display:flex;gap:14px;align-items:flex-start}
.behind-ico{flex:none;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
  background:var(--green);color:var(--green-ink);font-size:18px;font-style:normal}
.behind-item h4{font-size:18px;margin:2px 0 5px}
.behind-item p{font-size:14px;line-height:1.5;color:var(--muted);margin:0}

/* ===== Aliados ===== */
.allies{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ally{background:var(--paper);border:1px solid var(--line);border-radius:16px;
  padding:20px 14px;text-align:center;transition:transform .15s,border-color .15s}
.ally:hover{transform:translateY(-2px);border-color:var(--gold)}
.ally-name{font-size:18px;font-weight:700}
.ally-role{font:700 11px "Helvetica Neue",Arial,sans-serif;color:var(--gold-deep);
  text-transform:uppercase;letter-spacing:.08em;margin-top:4px}

/* ===== Diferencial ===== */
.diff{background:var(--paper2);border:1px solid var(--line-soft);border-left:3px solid var(--gold);
  border-radius:14px;padding:22px 26px;display:flex;gap:16px;align-items:flex-start;
  max-width:860px;margin:0 auto}
.diff-ico{flex:none;font-size:24px;color:var(--gold-deep)}
.diff p{font-size:16px;line-height:1.6;color:var(--ink);margin:0}
.diff strong{color:var(--gold-deep)}

/* ===== CTA oscuro ===== */
.dark-cta{background:#0b0907;color:#fff1df}
.cta-box{display:flex;align-items:center;justify-content:space-between;gap:24px;
  border:1px solid rgba(199,151,73,.26);border-radius:var(--radius-lg);padding:34px;
  background:linear-gradient(180deg,rgba(31,24,18,.95),rgba(13,10,8,.98))}
.cta-box h2{font-size:30px;margin:0 0 10px;color:var(--gold-bright);text-wrap:balance}
.cta-box p{font-size:17px;line-height:1.5;margin:0;color:#e3d4c2;max-width:520px}
.cta-box .btn{flex:none}

/* ===== Footer ===== */
.site-footer{background:#0a0806;color:#cdbfad;padding:30px 0}
.footer-inner{display:flex;flex-direction:column;gap:6px}
.footer-inner .f-main{font:700 14px "Helvetica Neue",Arial,sans-serif;color:#efe2cf}
.footer-inner .f-sub{font-size:13px;line-height:1.5;color:#9d8b76}

.empty-state{border:1px dashed var(--line);border-radius:18px;padding:28px;
  background:var(--paper);font-size:16px;line-height:1.45;color:var(--muted)}

/* ===== Responsive ===== */
@media(max-width:1120px){
  .photo-grid,.photo-grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .public-dossier{height:480px}
  .pillars{grid-template-columns:repeat(2,minmax(0,1fr))}
  .allies{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
  .wrap{width:min(100% - 28px,1180px)}
  .nav{display:none}
  .hero-grid{padding:40px 0}
  .hero h1{font-size:clamp(36px,9vw,48px)}
  .photo-grid,.photo-grid.cols-4,.pillars,.behind-grid,.allies{grid-template-columns:1fr}
  .photo-tile{height:300px}
  .cta-box{flex-direction:column;align-items:flex-start}
  .diff{flex-direction:column}
  .btn{min-height:52px;padding:0 24px;font-size:16px}
  .ps-item{padding:12px 12px 8px;min-width:64px}
  .ps-item svg{width:32px;height:32px}
  /* Fix 1: pilares cómo funciona */
  .pillar{padding:24px}
  .pillar p{font-size:16px}
  /* Fix 2: aliados más altura y centrado vertical */
  .ally{min-height:80px;display:flex;flex-direction:column;justify-content:center;align-items:center}
  /* Fix 5: título de sección */
  .title-line h2{font-size:18px}
  /* padding secciones compacto */
  .section{padding:32px 0}
  .section.compact{padding:20px 0}
}

/* ── EL TOPE DE LA CUENTA GRATUITA, EN «MIS PIEZAS» (15/08/2026) ───────
   No es un cartel de error: es el único momento del producto en que
   alguien está claramente enganchado —acaba de cargar sus guitarras a
   mano— así que se ve como una propuesta, no como una traba. Borde
   suave, no rojo. */
.mis-tope {
  background: #FAF8F2; border: 1px solid #e0d3ba; border-left: 3px solid #8b3a2a;
  border-radius: 8px; padding: 20px 22px; margin: 0 0 26px;
}
.mis-tope-tit {
  margin: 0 0 8px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600; color: #8b3a2a;
}
.mis-tope-txt { margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: #3f3b36; max-width: 62ch; }
.mis-tope-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.mis-tope-btns .btn { min-height: 42px; padding: 0 18px; display: inline-flex; align-items: center; }

/* ── LAS TRES PUERTAS (15/08/2026) ────────────────────────────────────
   El cuadro de tarifas comprimido a una decisión, en el momento del
   tope. El tag va primero y destacado a propósito: sale MENOS que
   publicar suelto y es lo que queremos que compre. La tercera columna
   —seguir gratis— no es un botón: es la salida honesta, y tiene que
   estar ahí para que las otras dos no se lean como un peaje. */
.puertas {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin: 18px 0 12px; align-items: stretch;
}
.puerta {
  display: flex; flex-direction: column; text-decoration: none;
  background: #fff; border: 1px solid #e0d3ba; border-radius: 10px;
  padding: 18px 18px 20px; color: #3f3b36; transition: border-color .15s, box-shadow .15s;
}
a.puerta:hover { border-color: #8b3a2a; box-shadow: 0 3px 14px rgba(0,0,0,.07); }
.puerta-alta { border-color: #8b3a2a; border-top: 3px solid #8b3a2a; }
.puerta-tenue { background: #FAF8F2; border-style: dashed; }
.puerta-chip {
  display: inline-block; align-self: flex-start; background: #8b3a2a; color: #fff;
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
  padding: 3px 8px; border-radius: 3px; margin: 0 0 9px;
}
.puerta-nombre {
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600; color: #3f3b36;
}
.puerta-alta .puerta-nombre { color: #8b3a2a; }
.puerta-precio { display: block; font-size: 26px; font-weight: 600; letter-spacing: -.02em; margin: 7px 0 2px; }
.puerta-um { display: block; font-size: 12px; color: #8a8177; margin: 0 0 13px; line-height: 1.4; }
.puerta-lista { list-style: none; margin: 0 0 16px; padding: 0; flex: 1 1 auto; }
.puerta-lista li {
  position: relative; padding: 5px 0 5px 19px; font-size: 13.5px; line-height: 1.45;
}
.puerta-lista li::before {
  content: '✓'; position: absolute; left: 0; top: 5px; color: #3f7a34; font-weight: 700;
}
.puerta-lista li.puerta-no { color: #a9a49a; }
.puerta-lista li.puerta-no::before { content: '✕'; color: #c0b8ab; }
.puerta-cta {
  display: block; text-align: center; border: 1px solid #3f3b36; border-radius: 6px;
  padding: 11px 10px; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600; min-height: 42px;
}
.puerta-alta .puerta-cta { background: #3f3b36; color: #fff; border-color: #3f3b36; }
.puertas-pie { margin: 4px 2px 0; font-size: 12.5px; color: #8a8177; line-height: 1.6; }
@media (max-width: 860px) {
  .puertas { grid-template-columns: 1fr; gap: 12px; }
  .puerta-precio { font-size: 23px; }
}

/* ══ TABLA DE PRECIOS (precios.php) ═══════════════════════════════════
   Referencias cruzadas: qué se puede hacer en las filas, las tres
   opciones en las columnas. El tag va AL MEDIO y marcado porque sale
   MENOS que publicar suelto — la columna destacada tiene que ser la que
   querés que elijan, no la más cara.

   EL ANCHO DE LA PÁGINA SE DECIDE ACÁ, NO EN EL HTML. precios.php tenía
   escrito un `style="max-width:1000px"` que no hacía nada: pulpa_dpp.css
   pone `.dpp-body .dpp-wrap { max-width: 1470px !important }` para los
   listados, y ese !important se lo comía. La tabla terminaba dibujada a
   1414px — 300px de columna para mostrar un tilde, y una fila que se
   lee como un renglón vacío con una marca perdida en el medio.
   960 no es un número a ojo: es el más angosto en el que ninguna celda
   se parte en dos renglones. Más ancho sobra aire; más angosto, «Una por
   publicación» se corta y la fila crece por el ancho, no por lo que dice.
   El `:has()` es el mismo recurso que usa pulpa_archivo.css para
   `.dpp-wrap:has(.listado-layout)`: gana por especificidad sin tocar la
   regla de los listados, que sigue siendo la correcta para ellos. */
.dpp-body .dpp-wrap:has(.tar-caja) { max-width: 1260px !important; }

/* Seis filas de tres opciones tienen que entrar de una sola mirada. El
   aire que sobraba no hacía que se leyera mejor: obligaba a scrollear
   para comparar la primera fila con la última, que es exactamente lo
   que una tabla de comparación existe para evitar. */
.tar-caja { background: #fff; border-top: 3px solid #3f3b36; margin: 20px 0 0; }
.tar { width: 100%; border-collapse: collapse; }
.tar th, .tar td { text-align: left; padding: 11px 16px; border-bottom: 1px solid #ece4d6; vertical-align: middle; }
.tar thead th { border-bottom: 1px solid #3f3b36; vertical-align: bottom; padding: 14px 16px 12px; }
/* CUATRO COLUMNAS Y NO TRES desde que la tienda tiene la suya. La
   etiqueta cede ancho: con cuatro opciones lo que se compara pesa más
   que el nombre de la fila. */
.tar-que { width: 30%; }
.tar-col { width: 17.5%; text-align: center; }
/* 1260 y no 960: con cuatro opciones cada columna necesita su aire. Se
   midió — abajo de 1260 la grilla crece de alto por celdas que se
   parten, y arriba no mejora nada. */
/* La columna de la tienda, apenas separada: es un trato distinto, no una
   cuarta variante de lo mismo. */
.tar-tnd { border-left: 1px solid #ece4d6; background: #FCFAF6; }
.tar-tnd .tar-nombre { color: #3f7a34; }
.tar-plata-chica { font-size: 17px !important; letter-spacing: 0 !important; }
.tar tbody th { font-weight: 400; font-size: 14.5px; line-height: 1.35; }
.tar-nombre { display: block; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
/* MIN-HEIGHT PARA QUE LOS CUATRO TÍTULOS QUEDEN A LA MISMA ALTURA.
   Los encabezados se alinean abajo, así que una columna con una línea
   más de subtítulo —la del Mostrador, que además dice su tope— empuja su
   nombre para arriba y los cuatro quedan escalonados. Reservando el alto
   de tres renglones en las cuatro, el desparejo desaparece sin tener que
   acortar ningún texto. Si algún día un subtítulo pasa de tres líneas,
   este número sube. */
.tar-para { display: block; font-size: 12.5px; color: #8a8177; margin-top: 5px; letter-spacing: 0;
            text-transform: none; font-weight: 400; line-height: 1.4; min-height: 4.2em; }
.tar-chip { display: inline-block; font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
            background: #8b3a2a; color: #fff; padding: 3px 8px; margin: 0 0 8px; font-weight: 600; }
/* El chip de la columna Tienda. Verde como su nombre, no terracota:
   terracota ya significa «la recomendada», y dos chips del mismo color en
   la misma fila se leen como la misma etiqueta. */
.tar-chip-tnd { background: #3f7a34 !important; }
/* «Próximamente». Gris y no verde: el verde de esta columna significa
   «esto lo tenés», y prometer con el color lo que el texto desmiente es
   peor que no poner nada. */
.tar-chip-pronto { background: #a09383 !important; }
.tnd-pronto { font-size: 13.5px; line-height: 1.55; color: #6b6156; margin: 12px 0 0; max-width: 58ch; }
/* La condición que viaja con una celda —«mínimo 20 piezas», «requiere el
   mail del nuevo custodio»—. Es lo que evita que un tilde prometa más de
   lo que cumple, así que no puede faltar; y va chica y en su renglón para
   no competir con el tilde. */
.tar-nota { display: block; margin-top: 4px; font-size: 10.5px; line-height: 1.35;
            color: #8a8177; font-weight: 400; letter-spacing: 0; text-transform: none; }
.tar-alta { background: #FAF8F2; }
.tar-alta .tar-nombre { color: #8b3a2a; }
.tar-chico { display: block; font-size: 12px; color: #8a8177; margin-top: 2px; line-height: 1.3; font-weight: 400; }
.tk { font-weight: 700; font-size: 16px; line-height: 1; }
.tk.si { color: #3f7a34; } .tk.no { color: #c0392b; }
/* «No aplica». Gris y liviana a propósito: si pesa como la cruz, el ojo
   la cuenta como una carencia, y no lo es. */
.tk.raya { color: #b3aa9c; font-weight: 400; }
/* «Todavía no, pero está decidido que sí». No es un tilde —no lo cumple
   hoy— ni una cruz —no es que no vaya a existir—. Va en minúscula y en
   letra chica para que no se lea como una promesa cumplida: el día que
   se cumple, pasa a ser ✓ y esta clase desaparece de esa fila. */
.tk.pronto { font-size: 11px; font-weight: 600; color: #a09383;
             letter-spacing: .04em; text-transform: lowercase; }
/* El tope del Mostrador, en el encabezado de su columna. Chico y en dos
   renglones: define la columna entera, así que tiene que estar ahí
   arriba, pero no puede competir con el nombre. */
/* El tope del Mostrador. Va adentro del subtítulo y no como bloque
   aparte, para que entre en el mismo alto reservado que el resto. */
.tar-tope { font-size: 11px; color: #7a6a55; }
.tar-precio th, .tar-precio td { border-bottom: none; padding-top: 18px; padding-bottom: 6px; }
.tar-plata { display: block; font-size: 23px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.tar-um { display: block; font-size: 12px; color: #8a8177; margin-top: 4px; line-height: 1.4; }
/* ARRIBA, NO AL MEDIO — 30/08/2026. La celda del PulpaTag lleva el
   botón y debajo su «Próximamente», así que es más alta que las otras
   dos; con el `vertical-align: middle` de una tabla, los otros dos
   botones se centraban contra esa altura y las tres puntas quedaban
   desalineadas. Alineados arriba, los tres botones empiezan en la
   misma línea y el «Próximamente» cuelga debajo del suyo. */
.tar-cta td { border-bottom: none; padding: 4px 12px 20px; vertical-align: top; }
.tar-btn { display: flex; align-items: center; justify-content: center; text-align: center;
           text-decoration: none; border: 1px solid #3f3b36; color: #3f3b36; padding: 10px 8px;
           font-size: 11px; letter-spacing: .13em; text-transform: uppercase; min-height: 42px; line-height: 1.3; }
.tar-btn.lleno { background: #3f3b36; color: #fff; }
/* ══ EL TRATO DE UNA TIENDA (precios.php) ═════════════════════════════
   Va abajo de la tabla y se ve distinto a propósito: no es una cuarta
   columna. Una tienda no elige entre las tres opciones de arriba —
   tiene otro trato— y meterla en la misma tabla obligaría a que la fila
   «su pasaporte permanente» diga algo que para un catálogo no es cierto. */
.tnd { background: #fff; border-top: 3px solid #8b3a2a; margin: 26px 0 0; padding: 22px 24px 26px; }
.tnd-rot { font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
           color: #8b3a2a; font-weight: 600; margin: 0 0 8px; }
.tnd-tit { font-size: 26px; letter-spacing: -.01em; margin: 0 0 12px; }
.tnd-baja { font-size: 15px; line-height: 1.6; color: #3f3b36; margin: 0 0 16px; max-width: 64ch; }
.tnd-hoy { display: inline-block; background: #3f7a34; color: #fff; font-size: 12px;
           font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
           padding: 6px 12px; border-radius: 2px; margin: 0 0 14px; }
.tnd-modelo { font-size: 19px; font-weight: 700; color: #8b3a2a; margin: 0 0 10px;
               letter-spacing: -.01em; }
/* LAS DOS REGLAS DEL TRATO. No son un punto más de la lista de abajo:
   son las condiciones —cómo se paga y hasta dónde— y por eso van en un
   recuadro propio, antes. Fondo crema y filete terracota para que se
   lean como «acá está la letra chica, y no es chica». */
.tnd-reglas { background: #fdf8ef; border-left: 3px solid #8b3a2a;
              padding: 13px 16px; margin: 0 0 18px; max-width: 64ch; }
.tnd-reglas p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #3f3b36; }
.tnd-reglas p + p { margin-top: 9px; }
.tnd-lista { list-style: none; margin: 0 0 20px; padding: 0; }
.tnd-lista li { border-top: 1px solid #ece4d6; padding: 11px 0; font-size: 14.5px;
                line-height: 1.5; max-width: 64ch; }
.tnd-btn { display: inline-flex !important; }
/* El botón lleno es oscuro y su texto tiene que ser blanco. Sin esto
   gana `.dpp-body a:not(.dpp-btn-primary):not(.dpp-sim-card):not(.pieza)`
   de pulpa_archivo.css, que pinta de naranja todos los links del cuerpo,
   y el botón queda terracota sobre marrón: ilegible.
   VA CON !important Y NO CON MÁS ESPECIFICIDAD porque no alcanza: cada
   `:not()` suma la clase que lleva adentro, así que esa regla pesa
   cuatro clases y un elemento. Para ganarle por peso habría que inventar
   una cadena todavía más larga, que es peor de leer y peor de mantener.
   Es un bug viejo que nunca se vio: el único `.tar-btn.lleno` de la
   tabla hoy dice «Muy pronto» y está apagado. */
.dpp-body a.tar-btn.lleno { color: #fff9f5 !important; }

.tar-pie { margin: 18px 2px 0; color: #8a8177; font-size: 12.5px; line-height: 1.6; }
.tar-pie b { color: #3f3b36; }
.tar-tarjetas { display: none; }
.tar-card { background: #fff; border-top: 3px solid #3f3b36; padding: 20px 18px; margin: 0 0 14px; }
.tar-card.alta { border-top-color: #8b3a2a; }
.tar-card h2 { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 4px; }
.tar-card ul { list-style: none; margin: 14px 0 18px; padding: 0; }
.tar-card li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid #ece4d6; font-size: 14px; align-items: flex-start; }
.tar-card li:last-child { border-bottom: none; }
@media (max-width: 820px) {
  .tar-caja { display: none; }
  .tar-tarjetas { display: block; margin-top: 22px; }
}

/* ══ COMPRAR PUBLICACIONES (comprar.php) ══════════════════════════════ */
.pago-form { margin: 24px 0 0; }
.packs-pub { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0 0 22px; }
.pack-pub { display: block; background: #fff; border: 1px solid #e0d3ba; border-radius: 10px;
            padding: 16px 15px 18px; cursor: pointer; transition: border-color .15s; }
.pack-pub:hover { border-color: #8b3a2a; }
.pack-pub input { position: absolute; opacity: 0; }
.pack-pub:has(input:checked) { border-color: #8b3a2a; box-shadow: inset 0 0 0 1px #8b3a2a; }
.pack-pub-alta { background: #FAF8F2; }
.pack-pub-cant { display: block; font-size: 30px; font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.pack-pub-que { display: block; font-size: 12px; color: #8a8177; margin: 3px 0 10px; }
.pack-pub-precio { display: block; font-size: 17px; font-weight: 600; }
.pack-pub-um { display: block; font-size: 12px; color: #8a8177; margin-top: 2px; }
.pack-pub-para { display: block; font-size: 12.5px; color: #6c5d4d; margin-top: 10px; line-height: 1.4; }
.pago-medios { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 0 0 20px; font-size: 14.5px; }
.pago-medios-tit { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #8a8177; }
.pago-btn { display: inline-block; background: #3f3b36; color: #fff; text-decoration: none; border: 0;
            border-radius: 7px; padding: 14px 24px; font: 600 12.5px/1.2 inherit; letter-spacing: .12em;
            text-transform: uppercase; cursor: pointer; min-height: 46px; }
.pago-btn:hover { background: #8b3a2a; }
.pago-chico { font-size: 12.5px; color: #8a8177; margin: 10px 0 0; line-height: 1.55; }
.pago-caja { background: #fff; border: 1px solid #e0d3ba; border-radius: 10px; padding: 22px 24px; margin: 22px 0 0; }
.pago-nota { margin: 0 0 20px; font-size: 15px; line-height: 1.6; }
.pago-via { border-top: 1px solid #ece4d6; padding: 18px 0 4px; }
.pago-via:first-of-type { border-top: 0; padding-top: 0; }
.pago-via-tit { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #8a8177; margin: 0 0 12px; }
.pago-datos { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0 0 10px; font-size: 15px; }
.pago-datos dt { color: #8a8177; font-size: 13px; }
.pago-datos dd { margin: 0; }
.pago-falta { background: #fbeaea; border: 1px solid #e6c9c9; border-radius: 7px; padding: 13px 15px; font-size: 14px; line-height: 1.55; }
.pago-hist-tit { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #8a8177; margin: 36px 0 10px; }
.pago-hist { width: 100%; border-collapse: collapse; font-size: 14px; }
.pago-hist td { padding: 9px 12px 9px 0; border-bottom: 1px solid #ece4d6; }
@media (max-width: 760px) {
  .packs-pub { grid-template-columns: repeat(2, 1fr); }
  .pago-caja { padding: 18px 16px; }
}

/* El link del pie de las puertas estaba saliendo como link crudo —azul y
   subrayado— en medio de un cuadro que no tiene ningún otro link así. */
.puertas-pie a { color: #8b3a2a; text-decoration: none; border-bottom: 1px solid #e0d3ba; }
.puertas-pie a:hover { border-bottom-color: #8b3a2a; }

/* La puerta de publicación es un <form>, no un <a>: manda el pedido y va
   derecho al pago. Tiene que verse igual que las otras dos. */
form.puerta { cursor: default; }
form.puerta:hover { border-color: #8b3a2a; box-shadow: 0 3px 14px rgba(0,0,0,.07); }
button.puerta-cta {
  width: 100%; background: none; cursor: pointer; font-family: inherit;
}
.puerta-varias { display: block; text-align: center; margin-top: 10px; font-size: 12px; }
.puerta-varias a { color: #8a8177; text-decoration: none; border-bottom: 1px solid #e0d3ba; }
.puerta-varias a:hover { color: #8b3a2a; }

/* ── LO QUE TODAVÍA NO SE VENDE ───────────────────────────────────────
   El botón se muestra apagado y no se esconde. Esconder el producto
   principal para que no se note que falta es peor que decir «muy
   pronto»: el que llega tiene que entender qué va a poder comprar. */
.puerta-cta.apagado, .tar-btn.apagado {
  background: #f0ebe1 !important; color: #a49a8c !important; border-color: #e4dccd !important;
  cursor: default; pointer-events: none;
}
.puerta-apagada { opacity: .96; }
.puerta-apagada:hover { border-color: #8b3a2a; box-shadow: none; }
.puerta-apagada .puerta-varias { color: #a49a8c; }

/* ── EL PUNTO DE LA TIENDA PUESTA ────────────────────────────────────
   22/08/2026. Sólo se dibuja para quien administra más de una tienda:
   con una sola, el menú de cuenta no cambió en nada.
   El punto va antes del nombre y en su propia caja de ancho fijo, así
   los dos nombres arrancan a la misma altura y la lista se lee como una
   lista y no como dos renglones desalineados. El lleno pesa más que el
   vacío a propósito: el que está puesto tiene que saltar sin leer. */
.hdr-casa{display:flex;align-items:center;gap:0}
.hdr-casa-punto{display:inline-block;width:15px;flex:none;
  font-size:9px;line-height:1;opacity:.45}
.hdr-casa.es-activa{font-weight:600}
.hdr-casa.es-activa .hdr-casa-punto{opacity:1}

/* ── EL PEDIDO DE PULPATAG, APAGADO ───────────────────────────────────
   30/08/2026. El producto se muestra, se explica y se puede desear; la
   ACCIÓN comercial queda apagada hasta que haya unidades físicas. Mismo
   botón, con el mismo texto, sin href y sin click — el día que lleguen
   se habilita y no cambia nada más. El «Próximamente» va debajo, chico:
   la frase buena es la del botón y no se pierde. Por qué no se esconde:
   ver el comentario de .puerta-cta.apagado. */
button.cta-apagado, span.cta-apagado {
  background: #f0ebe1 !important; color: #a49a8c !important;
  border-color: #e4dccd !important; cursor: default; pointer-events: none;
  font-family: inherit;
}
button.tar-btn { width: 100%; font-family: inherit; }
.cta-proximamente { display: block; margin-top: 6px; font-size: 10.5px;
  letter-spacing: .13em; text-transform: uppercase; color: #a49a8c; }

/* ── LA OFERTA ÚNICA DEL PULPATAG (packs.php) ─────────────────────────
   30/08/2026. Reemplaza la grilla de packs. Una tarjeta sola, centrada,
   con el precio grande, lo que incluye y el botón. Se ve como una
   propuesta cerrada y no como la primera fila de un catálogo. */
.pk-oferta { max-width: 460px; margin: 26px auto 0; border: 1px solid #e4dccd;
  border-radius: 10px; padding: 30px 28px 26px; background: #fffdfa; text-align: center; }
.pk-oferta-precio { font-size: 34px; letter-spacing: .01em; line-height: 1.1; }
.pk-oferta-um { display: block; margin-top: 6px; font-size: 12px; color: #8a8177;
  letter-spacing: .04em; text-transform: none; }
.pk-oferta-incluye { margin: 24px 0 10px; font-size: 12px; letter-spacing: .13em;
  text-transform: uppercase; color: #8a8177; }
.pk-incluye { list-style: none; margin: 0 0 24px; padding: 0; text-align: left;
  display: inline-block; }
.pk-incluye li { position: relative; padding: 4px 0 4px 22px; font-size: 13.5px; line-height: 1.5; }
.pk-incluye li::before { content: '·'; position: absolute; left: 8px; color: #8b3a2a;
  font-weight: 700; }
.pk-oferta-cta { display: inline-flex; align-items: center; justify-content: center;
  min-width: 240px; }
.pk-varios { max-width: 460px; margin: 34px auto 0; text-align: center; }
.pk-varios h3 { font-size: 13px; letter-spacing: .13em; text-transform: uppercase;
  color: #8a8177; margin: 0 0 8px; }
.pk-varios p { font-size: 13.5px; line-height: 1.6; color: #6f6659; }
@media (max-width: 520px) {
  .pk-oferta { padding: 26px 20px 22px; }
  .pk-oferta-precio { font-size: 29px; }
  .pk-oferta-cta { min-width: 0; width: 100%; }
}

/* La regla del cupo, arriba de la tabla de precios. Ver el comentario
   en precios.php: no es letra chica —es la frase que evita que un
   coleccionista lea un techo de tres piezas donde no lo hay— pero
   tampoco compite con el titular. */
.tar-regla { max-width: 62ch; margin: 22px 0 0; font-size: 13.5px; line-height: 1.6;
  color: #6f6659; border-left: 3px solid #e0d3ba; padding: 2px 0 2px 16px; }