/* ============================================================
   PULPA — DPP (Digital Product Passport)
   Página pública de pieza. Mobile-first → responsive desktop.
   Usa variables CSS de pulpa_sitio.css.
   ============================================================ */

/* ---- Layout superior: media + info ---- */

.dpp-layout {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 780px) {
  .dpp-layout {
    grid-template-columns: 54fr 46fr;
    align-items: start;
    min-height: 540px;
  }
}

/* ---- Columna de fotos ---- */

.dpp-media {
  position: relative;
  background: #0e0b08;
}

.dpp-photo-main {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #15110d;
}

@media (min-width: 780px) {
  .dpp-photo-main {
    aspect-ratio: unset;
    height: 540px;
  }
}

.dpp-photo-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity .25s;
}

/* Badges sobre la foto */
.dpp-badges {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}

.dpp-badge {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 13px;
  border-radius: 999px;
  font: 700 11px "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .06em;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(199,151,73,.5);
  background: rgba(10,8,5,.85);
  color: var(--gold-bright);
  white-space: nowrap;
}

.dpp-badge-verif {
  background: rgba(199,151,73,.96);
  color: #fff9ef;
  border-color: transparent;
}

/* NUEVO — la condición, arriba del título.
   Verde y no terracota: el terracota ya es el chip de «INGRESO RECIENTE»
   de las tarjetas, y dos sellos del mismo color diciendo cosas distintas
   es volver al problema que acabamos de sacar. El dorado es de
   VERIFICADA. Con esto los tres sellos del sitio se distinguen de lejos
   y sin leerlos.
   Casi sin radio: los redondeados del sitio son de foto y de botón. Un
   sello de dato quiere esquina, para que no se lea como algo que se
   aprieta. */
/* CONDICIÓN: NUEVO — 26/08/2026.
   Era un pill verde en mayúsculas que decía NUEVO. Ahora lleva su rótulo
   adelante, así que ya no es un grito: es un par «rótulo → valor» y se
   lee como un dato de la ficha. Baja el peso del fondo y el destaque
   pasa al valor, que es el que importa. */
.dpp-pill-nuevo {
  display: inline-block;
  vertical-align: middle;
  background: rgba(63,122,52,.12);
  color: #3f7a34;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1;
  padding: 5px 8px;
  border-radius: 3px;
  margin-left: 9px;
  position: relative;
  top: -1px;
}
.dpp-pill-nuevo b { font-weight: 700; }

/* Tira de miniaturas */
.dpp-thumbs {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 9px 12px;
  background: #12100d;
  scrollbar-width: none;
}
.dpp-thumbs::-webkit-scrollbar { display: none; }

.dpp-thumb {
  flex: none;
  width: 68px;
  height: 52px;
  border-radius: 7px;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  opacity: .65;
  transition: opacity .15s, border-color .15s;
}
.dpp-thumb:hover { opacity: .9; }
.dpp-thumb.active {
  border-color: var(--gold);
  opacity: 1;
}
.dpp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Columna de información ---- */

.dpp-info {
  padding: 24px 20px 32px;
  background: var(--paper2);
}

@media (min-width: 780px) {
  .dpp-info {
    padding: 36px 40px 44px;
    position: sticky;
    top: 76px;
    max-height: calc(100vh - 76px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
  }
}

.dpp-breadcrumb {
  font: 13px/1 "Helvetica Neue", Arial, sans-serif;
  color: var(--soft);
  margin-bottom: 18px;
  display: flex;
  gap: 7px;
  align-items: center;
}
.dpp-breadcrumb a {
  color: var(--gold-deep);
  transition: color .12s;
}
.dpp-breadcrumb a:hover { color: var(--gold); }
.dpp-breadcrumb span { color: var(--line); }

.dpp-meta-line {
  font: 700 11px "Helvetica Neue", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--gold-deep);
  margin-bottom: 10px;
}

.dpp-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.04;
  letter-spacing: -.025em;
  color: var(--ink);
  margin: 0 0 22px;
  text-wrap: balance;
}

/* Precio */
.dpp-price-area {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line-soft);
}

.dpp-price-label {
  font: 700 10px "Helvetica Neue", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--soft);
  margin-bottom: 5px;
}

.dpp-price {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 36px;
  line-height: 1;
  font-weight: 700;
  color: var(--ink);
}

.dpp-price-none {
  font: 15px/1.4 "Helvetica Neue", Arial, sans-serif;
  color: var(--soft);
}

/* Botones de acción */
.dpp-actions {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.dpp-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 52px;
  background: #c4503c;
  color: #fff9f5;
  border: none;
  border-radius: 13px;
  font: 700 16px "Helvetica Neue", Arial, sans-serif;
  cursor: pointer;
  text-decoration: none;
  transition: background .14s, transform .1s;
}
.dpp-btn-primary:hover {
  background: #a83d31;
  transform: translateY(-1px);
}

/* ── 31/08/2026 · LA CAJA DEL CTA DEL PULPATAG ──
   El botón de pedido y su «Próximamente» son una sola cosa y tienen que
   leerse así. Antes el «Próximamente» tenía 6px arriba y 0 abajo: quedaba
   más cerca de la fila COMPARTIR / COPIAR LINK que de su propio botón, y
   se leía como el rótulo de esa fila —o sea, anunciando que compartir
   viene próximamente, justo al revés de lo que pasa—.
   Poco aire adentro, bastante abajo. */
.dpp-cta-tag {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  margin: 10px 0 22px;
}
.dpp-cta-tag .cta-proximamente { margin-top: 0; }

.dpp-btn-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.dpp-btn-sec {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  border-radius: 11px;
  font: 700 14px "Helvetica Neue", Arial, sans-serif;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .14s, background .14s;
}
.dpp-btn-sec:hover {
  border-color: var(--gold);
  background: var(--cream);
}

/* Specs destacadas */
.dpp-specs-block {
  border-top: 1px solid var(--line-soft);
  padding-top: 18px;
}

.dpp-specs-label {
  font: 700 10px "Helvetica Neue", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--soft);
  margin-bottom: 11px;
}

.dpp-specs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.dpp-spec-card {
  background: var(--cream);
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  padding: 10px 10px 9px;
  overflow: hidden;
}

.dpp-spec-key {
  font: 700 10px "Helvetica Neue", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--soft);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dpp-spec-val {
  font: 700 15px Georgia, serif;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

/* ---- Secciones de contenido (ancho completo) ---- */

.dpp-body {
  background: var(--cream);
}

.dpp-wrap {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}

@media (min-width: 780px) {
  .dpp-body .dpp-wrap {
    max-width: 860px;
  }
}

.dpp-section {
  padding: 32px 0;
  border-top: 1px solid var(--line-soft);
}

.dpp-section:first-child {
  border-top: none;
}

.dpp-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.dpp-section-title:before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--gold-deep);
  flex: none;
}
.dpp-section-title h2 {
  margin: 0;
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 700;
}

/* Descripción */
.dpp-desc {
  font: 18px/1.65 Georgia, serif;
  color: var(--ink);
  max-width: 740px;
}
.dpp-desc p { margin: 0 0 14px; }
.dpp-desc p:last-child { margin: 0; }

/* Línea de tiempo */
.dpp-timeline {
  position: relative;
  padding-left: 32px;
  max-width: 680px;
}
.dpp-timeline::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--line);
}

.dpp-evento {
  position: relative;
  margin-bottom: 32px;
}
.dpp-evento:last-child { margin-bottom: 0; }

.dpp-evento-dot {
  position: absolute;
  left: -27px;
  top: 5px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--cream);
  border: 2px solid var(--gold-deep);
}
.dpp-evento-dot.verif { background: var(--gold); }

.dpp-evento-fecha {
  font: 700 12px "Helvetica Neue", Arial, sans-serif;
  color: var(--gold-deep);
  letter-spacing: .04em;
  margin-bottom: 4px;
}

.dpp-evento-titulo {
  font: 700 18px Georgia, serif;
  color: var(--ink);
  margin-bottom: 4px;
}

.dpp-evento-tipo-chip {
  display: inline-block;
  font: 700 10px "Helvetica Neue", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 10px;
  margin-bottom: 6px;
}

.dpp-evento-desc {
  font: 15px/1.55 "Helvetica Neue", Arial, sans-serif;
  color: var(--muted);
}

.dpp-sello {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 700 11px "Helvetica Neue", Arial, sans-serif;
  color: var(--green-ink);
  background: var(--green);
  border-radius: 999px;
  padding: 3px 11px;
  margin-top: 8px;
}

.dpp-timeline-vacio {
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: 14px;
  padding: 22px 26px;
  font: 15px/1.6 "Helvetica Neue", Arial, sans-serif;
  color: var(--soft);
  max-width: 560px;
}

/* Tarjeta dueño/archivo */
.dpp-owner-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  max-width: 520px;
}

.dpp-owner-seal {
  flex: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #15110b;
  border: 1px solid rgba(199,151,73,.4);
  display: grid;
  place-items: center;
  color: var(--gold-bright);
  font: 700 22px Georgia, serif;
}

.dpp-owner-body {}
.dpp-owner-nombre {
  font: 700 18px Georgia, serif;
  color: var(--ink);
  margin-bottom: 2px;
}
.dpp-owner-rol {
  font: 700 10px "Helvetica Neue", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gold-deep);
  margin-bottom: 7px;
}
.dpp-owner-desc {
  font: 14px/1.5 "Helvetica Neue", Arial, sans-serif;
  color: var(--muted);
}

/* No encontrado */
.dpp-notfound {
  padding: 80px 0;
  text-align: center;
}
.dpp-notfound h1 {
  font-size: 32px;
  margin-bottom: 14px;
}
.dpp-notfound p {
  font: 17px/1.55 "Helvetica Neue", Arial, sans-serif;
  color: var(--muted);
  margin-bottom: 28px;
}
.dpp-notfound .btn { display: inline-flex; }

/* Responsive extras */
@media (max-width: 480px) {
  .dpp-specs-grid { grid-template-columns: repeat(3, 1fr); gap: 5px; }
  .dpp-spec-val { font-size: 13px; }
  .dpp-title { font-size: 25px; }
  .dpp-price { font-size: 30px; }
  .dpp-section { padding: 36px 0; }
}

/* Fix mobile: secciones más compactas + botón consultar sticky */
@media (max-width: 779px) {
  .dpp-section { padding: 12px 0; }
  /* Botones NO fijos en movil (pedido de Andres): inline y scrollean. */
  .dpp-actions { padding-bottom: 0; }
}

/* ---- Ficha técnica completa (estilo catálogo vintage) ---- */

.dpp-ficha-tabla {
  max-width: 760px;
  border-top: 1px solid var(--line);
}

.dpp-ficha-fila {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 18px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--line-soft, rgba(0,0,0,.07));
}

.dpp-ficha-fila:nth-child(even) {
  background: rgba(196, 80, 60, 0.03);
}

.dpp-ficha-key {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--soft);
  padding-top: 3px;
}

.dpp-ficha-val {
  font: 16px Georgia, "EB Garamond", serif;
  color: var(--ink);
}

@media (max-width: 560px) {
  .dpp-ficha-fila {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* ---- Señales de confianza (bajo el CTA) ---- */

.dpp-trust {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
  padding: 14px 16px;
  background: rgba(196, 80, 60, 0.045);
  border: 1px solid var(--line-soft, rgba(0,0,0,.08));
  border-radius: 10px;
}

.dpp-trust-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: var(--soft);
}

.dpp-trust-item svg { color: #8b3a2a; flex-shrink: 0; }

/* La misma caja, sin el rojo. Una ficha sin PulpaTag no está mal: está
   a mitad de camino. Si se pinta igual que la caja de las tres promesas
   el ojo lee «lo mismo», y no es lo mismo; si se pinta de alerta, lee
   «hay un problema», y tampoco. Gris papel: es un estado, no un error. */
.dpp-trust-falta { background: rgba(0,0,0,.022); }
.dpp-trust-falta .dpp-trust-item svg { color: #8a8177; }

/* ---- Piezas similares ---- */

.dpp-similares {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.dpp-sim-card {
  display: block;
  text-decoration: none;
  border: 1px solid var(--line-soft, rgba(0,0,0,.08));
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  transition: transform .15s, box-shadow .15s;
}

.dpp-sim-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(26, 18, 8, .1);
}

.dpp-sim-foto {
  aspect-ratio: 4 / 3;
  background: #15110d;
  overflow: hidden;
}

.dpp-sim-foto img { width: 100%; height: 100%; object-fit: cover; }

.dpp-sim-body { padding: 12px 14px 14px; }

.dpp-sim-titulo {
  font: 15px/1.35 Georgia, serif;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dpp-sim-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 8px;
  font-size: 11px;
}

.dpp-sim-codigo { color: var(--soft); letter-spacing: .06em; }
.dpp-sim-precio { color: #8b3a2a; font-weight: 700; font-size: 13px; }

/* ---- Tira utilitaria + header sticky con buscador (estilo Carter) ---- */

.topstrip {
  background: #0e0a06;
  border-bottom: 1px solid rgba(199, 151, 73, .14);
}

.topstrip-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
}

.topstrip-item {
  font-size: 11.5px;
  letter-spacing: .05em;
  color: #a08c72;
  text-decoration: none;
}

a.topstrip-item:hover { color: #c79749; }

.sticky-header {
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
}

.header-search-layout {
  display: flex;
  align-items: center;
  gap: 26px;
}

.header-search {
  flex: 1;
  display: flex;
  align-items: center;
  max-width: 560px;
  background: #f7f3ed;
  border: 1px solid rgba(199, 151, 73, .35);
  border-radius: 999px;
  overflow: hidden;
}

.header-search input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 11px 20px;
  font-size: 14px;
  color: #1a1208;
  outline: none;
}

.header-search input::placeholder { color: #9a8a74; }

.header-search button {
  border: 0;
  background: transparent;
  color: #8b3a2a;
  padding: 10px 18px 10px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

@media (max-width: 700px) {
  .header-search-layout { flex-wrap: wrap; gap: 12px; }
  .header-search { order: 3; max-width: 100%; flex-basis: 100%; margin-bottom: 10px; }
  .topstrip-inner { justify-content: center; }
  .topstrip-item:last-child { display: none; }
}

/* ============================================================
   AFINACIÓN CARTER — tamaños, radios y proporciones exactas
   (medidas tomadas de cartervintage.com, paleta PULPA)
   ============================================================ */

/* Tira utilitaria: clara como Carter (beige), no oscura */
.topstrip {
  background: #f4ecd9;
  border-bottom: 1px solid #e5d9bf;
}
.topstrip-item { color: #1a1208; font-size: 13px; font-weight: 500; }
a.topstrip-item { color: #8b3a2a; }
a.topstrip-item:hover { color: #c4503c; }
.topstrip-inner { padding: 12px 0; }

/* Buscador: rectangular radio 8, botón cuadrado terracota */
.header-search {
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #d9cbb4;
}
.header-search input { padding: 12px 16px; font-size: 15px; }
.header-search button {
  background: #c4503c;
  color: #fff9f5;
  border-radius: 0 7px 7px 0;
  padding: 0 18px;
  align-self: stretch;
}
.header-search button:hover { background: #8b3a2a; }

/* Título y precio: proporciones Carter (24px, contenidos) */
.dpp-title {
  font-size: 26px !important;
  line-height: 1.25 !important;
  letter-spacing: .01em;
}
.dpp-price {
  font-size: 24px !important;
  font-weight: 400 !important;
}

/* CTA primario: 49px alto, radio 8, bold mayúscula, chevron */
.dpp-btn-primary {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 49px;
  padding: 0 20px !important;
  border-radius: 8px !important;
  background: #c4503c !important;
  border: 1px solid #8b3a2a !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.dpp-btn-primary:hover { background: #8b3a2a !important; }

/* Botones secundarios: mismos 49px/radio 8, borde fino, texto bordó */
.dpp-btn-sec,
a.dpp-btn-sec {
  height: 49px;
  padding: 0 20px !important;
  border-radius: 8px !important;
  background: transparent !important;
  border: 1px solid #473b31 !important;
  color: #8b3a2a !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.dpp-btn-sec:hover { border-color: #8b3a2a !important; background: rgba(196,80,60,.05) !important; }

/* Ficha técnica: celdas exactas Carter (13px, 7x16) */
.dpp-ficha-fila { padding: 7px 16px; grid-template-columns: 220px 1fr; gap: 12px; }
.dpp-ficha-key { font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: .02em; color: #5a4e44; }
.dpp-ficha-val { font-size: 13.5px; font-family: "Helvetica Neue", Arial, sans-serif; }
.dpp-ficha-fila:nth-child(even) { background: rgba(26, 18, 8, 0.025); }
.dpp-ficha-tabla { border: 1px solid #e5dccd; border-radius: 8px; overflow: hidden; }

/* Galería: miniaturas en columna vertical de 120px (layout Carter) */
/* (regla :has previa reemplazada por .dpp-media-card) */

/* Chips de confianza y cards: radio 8 consistente */
.dpp-trust { border-radius: 8px; }
.dpp-sim-card { border-radius: 8px; }

/* ---- Gate de registro (precio y contacto solo registrados) ---- */

.dpp-gate {
  border: 1px solid #e0cbb4;
  background: #faf5ec;
  border-radius: 8px;
  padding: 20px 22px;
}

.dpp-gate-titulo {
  font-size: 14px;
  font-weight: 700;
  color: #1a1208;
  letter-spacing: .02em;
  margin-bottom: 6px;
}

.dpp-gate-texto {
  font-size: 13px;
  color: #5a4e44;
  margin: 0 0 16px;
  line-height: 1.5;
}

.dpp-gate-botones {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.dpp-gate-botones .dpp-btn-primary { flex: 0 0 auto; text-decoration: none; }

.dpp-gate-login {
  font-size: 13px;
  font-weight: 700;
  color: #8b3a2a;
  text-decoration: none;
}
.dpp-gate-login:hover { text-decoration: underline; }

/* ============================================================
   GALERÍA ESTILO CARTER — card blanca, thumbs verticales, flechas
   ============================================================ */

/* Layout contenido (no full-bleed): ancho de página con margen */
.dpp-layout {
  max-width: 1470px;
  margin: 26px auto 0;
  padding: 0 28px;
  gap: 34px;
}

@media (min-width: 780px) {
  .dpp-layout { grid-template-columns: 58fr 42fr; min-height: unset; }
}

/* La media ya no es un bloque oscuro */
.dpp-media { background: transparent; }

/* Card blanca con borde que contiene thumbs + foto */
.dpp-media-card {
  display: flex;
  gap: 10px;
  background: #ffffff;
  border: 1px solid #e5dccd;
  border-radius: 8px;
  padding: 10px;
}

/* Thumbs: columna vertical, mini-cards con borde */
.dpp-media-card .dpp-thumbs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 104px;
  flex-shrink: 0;
  max-height: 600px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  scrollbar-width: thin;
}

.dpp-media-card .dpp-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  box-sizing: border-box;
  flex-shrink: 0;
  border: 1px solid #e5dccd;
  border-radius: 6px;
  overflow: hidden;
  background: #f5f2ec;
  cursor: pointer;
  opacity: 1;
}

.dpp-media-card .dpp-thumb img { width: 100%; height: 100%; object-fit: cover; }

.dpp-media-card .dpp-thumb.active { border: 2px solid #c4503c; }

/* Foto principal: fondo claro, imagen contenida, altura Carter */
.dpp-media-card .dpp-photo-main {
  flex: 1;
  position: relative;
  height: 600px;
  aspect-ratio: unset;
  background: #f5f2ec;
  border-radius: 6px;
  overflow: hidden;
}

.dpp-media-card .dpp-photo-main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Flechas prev/next: botones circulares beige (como Carter) */
.dpp-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid #e0d5bd;
  background: #f4ecd9;
  color: #1a1208;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s;
}

.dpp-nav:hover { background: #eadfc4; }
.dpp-nav-prev { left: 14px; }
.dpp-nav-next { right: 14px; }

/* Badges dentro de la card, arriba a la izquierda de la foto */
.dpp-media-card .dpp-badges { top: 14px; left: 14px; }

@media (max-width: 779px) {
  .dpp-layout { padding: 0 14px; }
  .dpp-media-card { flex-direction: column-reverse; }
  .dpp-media-card .dpp-thumbs { flex-direction: row; width: 100%; max-height: unset; overflow-x: auto; overflow-y: hidden; }
  .dpp-media-card .dpp-photo-main { height: 46vh; }
}

/* Fix: sin fondo oscuro heredado en la columna de thumbs */
.dpp-media-card .dpp-thumbs { background: transparent; }
.dpp-media-card { align-items: flex-start; }

/* ---- Cuenta en el header: Ingresar / Registrarse / usuario ---- */

.header-nav-cuenta { display: flex; align-items: center; gap: 18px; }

.hdr-ingresar {
  color: #f7f3ed !important;
  font-weight: 700;
}

.hdr-registro {
  background: #c4503c;
  color: #fff9f5 !important;
  padding: 9px 18px;
  border-radius: 8px;
  font-weight: 700;
  border: 1px solid #8b3a2a;
}
.hdr-registro:hover { background: #8b3a2a; }

.hdr-cuenta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #c79749 !important;
  font-weight: 700;
}

/* El botón "Ingresar" del gate hereda dpp-btn-sec (49px, radio 8) */
.dpp-gate-botones .dpp-btn-sec { text-decoration: none; }

/* ============================================================
   HEADER CLARO ESTILO CARTER (reemplaza la banda oscura)
   ============================================================ */

.sticky-header {
  background: #fffdf9;
  border-bottom: 1px solid #e5dccd;
  box-shadow: 0 2px 12px rgba(26, 18, 8, .07);
}

.sticky-header .header-inner { padding-top: 16px; padding-bottom: 16px; }

/* Marca sobre fondo claro */
.sticky-header .brand-main { color: #1a1208; }
.sticky-header .brand-sub  { color: #8b3a2a; }
.sticky-header .brand-seal {
  background: #1a1208;
  color: #c79749;
  border: 1px solid #c79749;
}

/* Buscador integrado al fondo claro */
.sticky-header .header-search {
  background: #ffffff;
  border: 1px solid #cdbfa6;
}
.sticky-header .header-search input { color: #1a1208; }

/* Navegación oscura sobre claro, con aire */
.sticky-header .nav { gap: 22px; }
.sticky-header .nav a { color: #1a1208; font-weight: 500; font-size: 15px; }
.sticky-header .nav a:hover { color: #8b3a2a; }

.sticky-header .hdr-ingresar { color: #1a1208 !important; font-weight: 700; }
.sticky-header .hdr-ingresar:hover { color: #8b3a2a !important; }

.sticky-header .hdr-registro {
  background: #c4503c;
  color: #fff9f5 !important;
  padding: 11px 22px;
  border-radius: 8px;
  border: 1px solid #8b3a2a;
  font-size: 14px;
  letter-spacing: .02em;
}
.sticky-header .hdr-registro:hover { background: #8b3a2a; }

.sticky-header .hdr-cuenta { color: #8b3a2a !important; }

/* ============================================================
   NAV DE CATEGORÍAS (fila bajo el header, estilo Carter)
   ============================================================ */

.catnav {
  background: #fffdf9;
  border-bottom: 1px solid #e5dccd;
}

.catnav-inner {
  display: flex;
  gap: 30px;
  padding: 11px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.catnav-inner::-webkit-scrollbar { display: none; }

.catnav a {
  font-size: 13.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #1a1208;
  text-decoration: none;
  white-space: nowrap;
}
.catnav a:hover { color: #8b3a2a; }

/* ============================================================
   HOME VIDRIERA (claro, estilo Carter)
   ============================================================ */

.home-carter { background: #f7f3ed; }

.home-hero {
  background: #fffdf9;
  border-bottom: 1px solid #e5dccd;
  padding: 52px 0;
}

.home-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
}

@media (min-width: 880px) {
  .home-hero-grid { grid-template-columns: 55fr 45fr; }
}

.home-kicker {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #8b3a2a;
  margin-bottom: 14px;
}

.home-hero-copy h1 {
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.15;
  color: #1a1208;
  margin: 0 0 16px;
}

.home-hero-copy p {
  font-size: 17px;
  line-height: 1.6;
  color: #5a4e44;
  max-width: 520px;
  margin: 0 0 26px;
}

.home-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.home-hero-actions a { text-decoration: none; }

.home-hero-pieza {
  display: block;
  position: relative;
  border: 1px solid #e5dccd;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  text-decoration: none;
  aspect-ratio: 4 / 3;
}
.home-hero-pieza img { width: 100%; height: 100%; object-fit: cover; }
.home-hero-pieza-info {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 16px 18px;
  background: linear-gradient(transparent, rgba(14, 10, 6, .82));
}
.home-hero-pieza-info .micro { color: #c79749; font-size: 11px; letter-spacing: .08em; }
.home-hero-pieza-titulo { font: 20px Georgia, serif; color: #f7f3ed; margin-top: 4px; }

.home-seccion { padding: 46px 0; }
.home-seccion-alt { background: #fffdf9; border-top: 1px solid #e5dccd; border-bottom: 1px solid #e5dccd; }

.home-seccion-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 24px;
}
.home-seccion-head h2 { font-size: 24px; color: #1a1208; margin: 0; }
.home-verlink { font-size: 13px; font-weight: 700; color: #8b3a2a; text-decoration: none; }
.home-verlink:hover { text-decoration: underline; }
.home-vacio { color: #5a4e44; }

/* Categorías del archivo */
.home-cats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
}
.home-cat-card {
  border: 1px solid #e5dccd;
  border-radius: 8px;
  background: #ffffff;
  padding: 22px;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.home-cat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(26,18,8,.09); }
.home-cat-nombre { font: 19px Georgia, serif; color: #1a1208; }
.home-cat-n { font-size: 12px; color: #8b3a2a; margin-top: 5px; font-weight: 700; }

/* Qué es el DPP */
.home-dpp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
}
.home-dpp-item {
  border: 1px solid #e5dccd;
  border-left: 3px solid #c4503c;
  background: #fffdf9;
  padding: 20px 22px;
}
.home-dpp-item h3 { font-size: 17px; color: #1a1208; margin: 0 0 8px; }
.home-dpp-item p { font: 14px/1.55 "Helvetica Neue", Arial, sans-serif; color: #5a4e44; margin: 0; }

/* Chip verificada en cards + gate de precio en card */
.dpp-sim-foto { position: relative; }
.card-chip-verif {
  position: absolute;
  top: 10px; left: 10px;
  background: #c79749;
  color: #1a1208;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 4px 10px;
  border-radius: 4px;
}
.dpp-sim-gate { font-size: 10.5px; color: #a3937d; }

/* ============================================================
   FOOTER ESTILO CARTER (oscuro, columnas)
   ============================================================ */

.footer-carter { background: #14100a; padding: 46px 0 0; }

.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 34px;
  padding-bottom: 36px;
}

.fcol { display: flex; flex-direction: column; gap: 9px; }

.fcol-titulo {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #c79749;
  margin-bottom: 4px;
}

.fcol a, .fcol-texto {
  font: 14px/1.5 Georgia, serif;
  color: #b3a48e;
  text-decoration: none;
}
.fcol a:hover { color: #f7f3ed; }

.fcol-marca .brand-seal { margin-bottom: 10px; }
.fcol-lema { font: 16px Georgia, serif; color: #f7f3ed; }
.fcol-sublema { font: 12.5px/1.55 "Helvetica Neue", Arial, sans-serif; color: #948472; margin-top: 6px; }

.footer-legal {
  border-top: 1px solid rgba(247, 243, 237, .08);
  padding: 16px 0;
  font-size: 12px;
  color: #948472;
}

/* ============================================================
   MOBILE — detalle fino en pantallas chicas
   ============================================================ */

@media (max-width: 700px) {
  .topstrip-inner { justify-content: center; padding: 8px 10px; }
  .topstrip-item { font-size: 11px; text-align: center; }

  .sticky-header .header-inner { padding: 12px 0; }
  .header-search-layout { flex-wrap: wrap; gap: 10px; }
  .brand { order: 1; }
  .header-nav-cuenta { order: 2; margin-left: auto; gap: 12px; }
  .header-search { order: 3; flex-basis: 100%; max-width: 100%; }
  .sticky-header .hdr-registro { padding: 8px 14px; font-size: 12.5px; }
  .sticky-header .nav a { font-size: 13.5px; }

  .catnav-inner { gap: 20px; padding: 10px 14px; }
  .catnav a { font-size: 12px; }

  .home-hero { padding: 30px 0; }
  .home-hero-actions .dpp-btn-primary,
  .home-hero-actions .dpp-btn-sec { width: 100%; }
  .home-seccion { padding: 30px 0; }
  .home-seccion-head h2 { font-size: 20px; }

  .dpp-layout { gap: 22px; margin-top: 14px; }
  .dpp-title { font-size: 22px !important; }
  .dpp-gate-botones { flex-direction: column; align-items: stretch; }
  .dpp-gate-botones .dpp-btn-primary,
  .dpp-gate-botones .dpp-btn-sec { width: 100%; }
  .dpp-btn-row { flex-direction: column; }
  .dpp-btn-row .dpp-btn-sec { width: 100%; }

  .dpp-ficha-fila { grid-template-columns: 1fr; gap: 2px; padding: 9px 14px; }

  .dpp-similares { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  .footer-cols { gap: 24px; }
}

/* Aire antes del footer en listados y ficha */
.dpp-body { padding-bottom: 60px; }
.dpp-similares { margin-bottom: 10px; }

/* ============================================================
   CARDS TAL CUAL CARTER — 330px, foto cuadrada, sin borde,
   título 18px, precio 24px
   ============================================================ */

.dpp-similares {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
}

.dpp-sim-card {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
}

.dpp-sim-card:hover {
  transform: none;
  box-shadow: none !important;
}

.dpp-sim-foto {
  aspect-ratio: 1 / 1;
  border-radius: 0;
  background: #efeae1;
}

.dpp-sim-card:hover .dpp-sim-titulo { color: #8b3a2a; }

.dpp-sim-body { padding: 14px 2px 0; }

.dpp-sim-titulo {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: #473b31;
}

.dpp-sim-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 8px;
}

.dpp-sim-precio {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 24px;
  font-weight: 500;
  color: #8b3a2a;
}

.dpp-sim-codigo {
  font-size: 11.5px;
  letter-spacing: .08em;
  color: #a3937d;
  order: 2;
}

.dpp-sim-gate {
  font-size: 11px;
  color: #8b3a2a;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: .01em;
}

@media (max-width: 700px) {
  .dpp-similares { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 24px; }
  .dpp-sim-titulo { font-size: 17px; }
  .dpp-sim-precio { font-size: 22px; }
}

/* ============================================================
   ROBOTO EN TODO (tipografía Carter) + BUSCADOR DOBLE ALTURA
   + DROPDOWNS TRANSLÚCIDOS ANIMADOS + TÍTULOS DE SECCIÓN
   ============================================================ */

.sans, .topstrip, .catnav, .header-search input, .header-search button,
.dpp-btn-primary, .dpp-btn-sec, .hdr-ingresar, .hdr-registro, .hdr-cuenta,
.dpp-sim-titulo, .dpp-sim-precio, .dpp-sim-codigo, .dpp-sim-gate,
.dpp-gate, .dpp-trust, .dpp-ficha-key, .dpp-ficha-val,
.home-kicker, .home-cat-n, .home-dpp-item p, .home-verlink,
.fcol-titulo, .footer-legal, .dpp-price-label, .dpp-specs-label,
.dpp-disclaimer, .dpp-meta-line, .dpp-breadcrumb {
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* Título y precio de ficha: Roboto como Carter */
.dpp-title {
  font-family: Roboto, sans-serif !important;
  font-weight: 700 !important;
}
.dpp-price { font-family: Roboto, sans-serif !important; font-weight: 500 !important; }

/* Títulos de sección grandes y bold (como "Brand New Instruments") */
.home-seccion-head h2 {
  font-family: Roboto, sans-serif;
  font-weight: 700;
  font-size: 32px;
  color: #0f0b09;
  letter-spacing: -.01em;
}
.dpp-section-title h2 {
  font-family: Roboto, sans-serif !important;
  font-weight: 700 !important;
  font-size: 21px !important;
  color: #0f0b09 !important;
  text-transform: none;
}
.home-hero-copy h1 { font-family: Roboto, sans-serif; font-weight: 700; letter-spacing: -.015em; }
.home-cat-nombre { font-family: Roboto, sans-serif; font-weight: 500; font-size: 18px; }
.home-dpp-item h3 { font-family: Roboto, sans-serif; font-weight: 700; }
.home-hero-pieza-titulo { font-family: Roboto, sans-serif; font-weight: 500; }
.fcol a, .fcol-texto, .fcol-lema { font-family: Roboto, sans-serif; }

/* Buscador doble altura (Carter: input alto) */
.header-search input { padding: 18px 20px; font-size: 15px; }
.header-search button { padding: 0 22px; }
.header-search button svg { width: 19px; height: 19px; }

/* Nav de categorías: tamaño Carter */
.catnav a.catnav-link, .catnav-item > .catnav-link {
  font-size: 15px;
  font-weight: 700;
  padding: 4px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.catnav-inner { gap: 34px; padding: 13px 0; overflow: visible; }
.catnav-caret { opacity: .55; transition: transform .18s ease; }
.catnav-item:hover .catnav-caret { transform: rotate(180deg); }

/* Dropdown translúcido con fade (como Carter) */
.catnav-item { position: relative; }

.catnav-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: -14px;
  min-width: 240px;
  background: rgba(255, 253, 249, .94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid #e5dccd;
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(26, 18, 8, .16);
  padding: 8px 0;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 60;
}

.catnav-item:hover .catnav-menu,
.catnav-item:focus-within .catnav-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.catnav-menu a {
  display: block;
  padding: 9px 20px;
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: #473b31;
  white-space: nowrap;
}
.catnav-menu a:hover { background: #f4ecd9; color: #8b3a2a; }
.catnav-menu a:first-child { font-weight: 700; color: #8b3a2a; }

@media (max-width: 700px) {
  .catnav-inner { overflow-x: auto; }
  .catnav-menu { display: none; }
  .header-search input { padding: 14px 16px; }
  .home-seccion-head h2 { font-size: 24px; }
}

/* Como Carter: el header scrollea con la página (sin sticky que tape contenido) */
.sticky-header {
  position: static;
  box-shadow: none;
}

/* Aire arriba del hero para que el kicker nunca quede pegado al nav */
.home-hero { padding-top: 46px; }

/* Fix: el header crece con su contenido (la altura fija de v11 cortaba el catnav sobre el hero) */
header.site-header { height: auto !important; min-height: 0 !important; }

/* ============================================================
   HOVER DE CARDS TAL CUAL CARTER
   (borde que aparece, fade de imagen, pie gris, chevron)
   ============================================================ */

.dpp-sim-card {
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  transition: border-color .18s ease;
}

.dpp-sim-card:hover {
  border-color: rgb(213, 207, 209) !important;
}

.dpp-sim-foto {
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}

.dpp-sim-foto img {
  transition: opacity .18s ease;
}

.dpp-sim-card:hover .dpp-sim-foto img {
  opacity: .8;
}

.dpp-sim-body {
  padding: 14px 14px 16px;
  border-radius: 0 0 8px 8px;
  transition: background-color .18s ease;
}

.dpp-sim-card:hover .dpp-sim-body {
  background-color: rgb(245, 245, 245);
}

.dpp-sim-precio-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.dpp-sim-chevron {
  color: #8b3a2a;
  opacity: 0;
  transition: opacity .18s ease;
  flex-shrink: 0;
}

.dpp-sim-card:hover .dpp-sim-chevron {
  opacity: 1;
}

/* ============================================================
   BANNER GRANDE (full-width, foto de pieza de fondo)
   ============================================================ */

.home-banner {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  background-color: #14100a;
  background-size: cover;
  background-position: center 35%;
}

.home-banner-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(14, 10, 6, .88) 0%, rgba(14, 10, 6, .62) 46%, rgba(14, 10, 6, .18) 100%);
}

.home-banner-content {
  position: relative;
  z-index: 2;
  padding-top: 64px;
  padding-bottom: 64px;
  max-width: 1340px;
}

.home-banner .home-kicker { color: #c79749; }

.home-banner h1 {
  font-family: Roboto, sans-serif;
  font-weight: 700;
  letter-spacing: -.015em;
  font-size: clamp(30px, 4.4vw, 50px);
  line-height: 1.12;
  color: #f7f3ed;
  max-width: 640px;
  margin: 0 0 18px;
}

.home-banner p {
  font-family: Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(247, 243, 237, .82);
  max-width: 520px;
  margin: 0 0 30px;
}

.home-banner .home-hero-actions .dpp-btn-primary { min-width: 220px; }

.home-banner-btn-sec {
  border-color: rgba(247, 243, 237, .55) !important;
  color: #f7f3ed !important;
  background: transparent !important;
}
.home-banner-btn-sec:hover {
  border-color: #f7f3ed !important;
  background: rgba(247, 243, 237, .1) !important;
}

.home-banner-credito {
  position: absolute;
  right: 26px;
  bottom: 18px;
  z-index: 2;
  font-size: 12px;
  letter-spacing: .04em;
  color: rgba(247, 243, 237, .75);
  text-decoration: none;
  background: rgba(14, 10, 6, .45);
  padding: 7px 14px;
  border-radius: 6px;
  backdrop-filter: blur(4px);
}
.home-banner-credito:hover { color: #f7f3ed; }

@media (max-width: 700px) {
  .home-banner { min-height: 440px; }
  .home-banner-content { padding-top: 44px; padding-bottom: 64px; }
  .home-banner-credito { right: 14px; bottom: 12px; font-size: 11px; }
}

/* Ajustes de botones en el banner: inline como Carter, colores sobre oscuro */
.home-banner .home-hero-actions { align-items: center; }
.home-banner .home-hero-actions .dpp-btn-primary,
.home-banner .home-hero-actions .dpp-btn-sec {
  display: inline-flex !important;
  width: auto;
  flex: 0 0 auto;
}
a.home-banner-btn-sec {
  border-color: rgba(247, 243, 237, .55) !important;
  color: #f7f3ed !important;
  background: transparent !important;
}
a.home-banner-btn-sec:hover {
  border-color: #f7f3ed !important;
  background: rgba(247, 243, 237, .12) !important;
}
@media (max-width: 700px) {
  .home-banner .home-hero-actions .dpp-btn-primary,
  .home-banner .home-hero-actions .dpp-btn-sec { width: 100%; }
}

/* Listados a ancho completo (4 cards por fila como Carter) */
.dpp-body .dpp-wrap { max-width: 1340px; }

/* ============================================================
   MENÚS DE CATEGORÍA — comportamiento Carter exacto:
   click-abre, blanco opaco, sombra Material, fade 300ms, z 6000
   ============================================================ */

header.site-header { position: relative; z-index: 500; }

.catnav-toggle {
  background: none;
  border: 0;
  cursor: pointer;
  font-family: Roboto, sans-serif;
}

.catnav-menu {
  background: rgb(255, 255, 255);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  border-radius: 0;
  box-shadow: rgba(0,0,0,.2) 0 1px 5px 0, rgba(0,0,0,.14) 0 2px 2px 0, rgba(0,0,0,.12) 0 3px 1px -2px;
  padding: 8px 0;
  min-width: 245px;
  transform: none;
  transition: opacity .3s ease-out;
  z-index: 6000;
}

/* Anular apertura por hover: solo .open (click) */
.catnav-item:hover .catnav-menu,
.catnav-item:focus-within .catnav-menu {
  opacity: 0;
  transform: none;
  pointer-events: none;
}

.catnav-item.open .catnav-menu {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}

.catnav-item.open .catnav-caret { transform: rotate(180deg); }
.catnav-item:hover .catnav-caret { transform: none; }

.catnav-menu a {
  font-size: 15px;
  padding: 8px 16px;
  color: rgb(15, 11, 9);
}
.catnav-menu a:hover { background: rgb(245, 245, 245); color: #8b3a2a; }

/* ============================================================
   PANEL DE FILTROS (estilo Carter: sidebar izquierda)
   ============================================================ */

.listado-titulo { font-family: Roboto, sans-serif; font-weight: 700; font-size: 30px; color: #0f0b09; margin-bottom: 22px; }
.listado-conteo { font-size: 16px; font-weight: 400; color: #8b8073; }

.listado-layout {
  display: grid;
  grid-template-columns: 264px 1fr;
  gap: 30px;
  align-items: start;
}

.filtros {
  background: #faf6ef;
  border: 1px solid #e5dccd;
  border-radius: 8px;
  padding: 18px 16px;
  position: sticky;
  top: 16px;
}

.filtro-grupo { margin-bottom: 16px; }

.filtro-label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #5a4e44;
  margin-bottom: 6px;
}

.filtro-select,
.filtro-rango input {
  width: 100%;
  border: 1px solid #d9cbb4;
  border-radius: 8px;
  background: #fff;
  padding: 10px 12px;
  font-family: Roboto, sans-serif;
  font-size: 14px;
  color: #1a1208;
  outline: none;
}
.filtro-select:focus, .filtro-rango input:focus { border-color: #8b3a2a; }

.filtro-rango { display: flex; gap: 8px; }

.filtro-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #1a1208;
  cursor: pointer;
}
.filtro-check input { accent-color: #c4503c; width: 16px; height: 16px; }

.filtro-gate {
  font-size: 13px;
  color: #5a4e44;
  background: #f4ecd9;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 16px;
}
.filtro-gate a { color: #8b3a2a; font-weight: 700; text-decoration: none; }

.filtro-aplicar { width: 100%; margin-top: 4px; }

.filtro-reset {
  display: block;
  text-align: center;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
  color: #8b3a2a;
  text-decoration: none;
}
.filtro-reset:hover { text-decoration: underline; }

/* Las cards se achican solas dentro del área de resultados */
.listado-resultados .dpp-similares { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; }

@media (max-width: 860px) {
  .listado-layout { grid-template-columns: 1fr; }
  .filtros { position: static; }
  .listado-resultados .dpp-similares { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
}

/* EL PANEL PEGADO NO PUEDE SER MÁS ALTO QUE LA PANTALLA — 01/09/2026.
   Es `position: sticky`: cuando su borde de arriba llega a los 16px se
   clava ahí y deja de moverse. Si adentro hay más de lo que entra en la
   ventana, lo que sobra queda abajo del borde y NO se llega scrolleando
   —la página baja, el panel no—: «Aplicar filtros» queda afuera.

   Se probó darle techo y scroll propio y se descartó: un panel con su
   propia barra al lado de la barra de la página son dos scrolls
   compitiendo por la misma rueda, y encima esconde la mitad de los
   filtros detrás de un gesto que nadie adivina. Los filtros se ven todos
   o no sirven.

   Así que cuando no entra, deja de estar pegado y baja con la página.
   Quién decide eso lo mide el JS del panel —el CSS no puede saber cuánto
   mide su propio contenido contra la ventana— y pone .no-pegar. */
.filtros.no-pegar { position: static !important; }

/* Mensaje rotativo de la tira superior */
.topstrip-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.topstrip-rotador {
  font-weight: 700;
  text-align: center;
  flex: 1;
  transition: opacity .35s ease;
  opacity: 1;
}
.topstrip-rotador.rotando { opacity: 0; }

/* Los toggles del catnav también en mayúsculas (se perdió al pasarlos a button) */
.catnav-toggle {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #1a1208;
  padding: 4px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.catnav-toggle:hover { color: #8b3a2a; }

@media (max-width: 700px) {
  .topstrip-rotador { display: none; }
}

/* ============================================================
   LISTADOS ESTILO CARTER: migas + título XL + resumen + pills
   ============================================================ */

.listado-migas {
  display: flex;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #5a4e44;
  margin-bottom: 10px;
}
.listado-migas a { color: #8b3a2a; text-decoration: none; }
.listado-migas a:hover { text-decoration: underline; }

.listado-titulo-xl {
  font-family: Roboto, sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.08;
  color: #0f0b09;
  margin: 0 0 8px;
  letter-spacing: -.015em;
}

.listado-resumen {
  font-size: 16px;
  color: #473b31;
  margin: 0 0 26px;
}
.listado-resumen b { color: #8b3a2a; font-weight: 700; }

/* Pills de marca en el panel de filtros */
.filtro-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.filtro-pills:empty { display: none; }

.marca-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f4ecd9;
  border: 1px solid #e0d5bd;
  border-radius: 999px;
  padding: 5px 6px 5px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #1a1208;
}

.marca-pill-x {
  border: 0;
  background: #d9cbb4;
  color: #473b31;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.marca-pill-x:hover { background: #c4503c; color: #fff9f5; }

/* Casillas de década en el panel de filtros ─────────────────────────
   Del ancho de dos dígitos y en fila que envuelve: seis u ocho décadas
   entran en dos renglones sin estirar la columna. Es la misma pastilla
   de las marcas, pero encendible: acá no se acumulan, se elige una. */
/* CUATRO POR FILA, Y NO LAS QUE ENTREN. En flex, «1910s» y «2020s» no
   miden lo mismo, así que la grilla se desalineaba de renglón a renglón
   y cada década quedaba a una sangría distinta. Con grid las cuatro
   columnas son iguales y la fila de arriba enseña dónde está la de
   abajo. */
.filtro-decadas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
/* La casilla de verdad está debajo de la pastilla, no dibujada: se puede
   tildar con el teclado y la lee un lector de pantalla, pero lo que se ve
   es la pastilla. El foco se marca en el borde. */
.filtro-decadas .deca {
  position: relative;
  display: inline-flex;
  align-items: center;
  border: 1px solid #d9cbb4;
  background: #fff;
  color: #473b31;
  border-radius: 999px;
  padding: 4px 9px;
  font-family: Roboto, sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}
.filtro-decadas .deca input {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; cursor: pointer;
}
.filtro-decadas .deca:hover { border-color: #c4503c; color: #c4503c; }
.filtro-decadas .deca:has(input:focus-visible) { outline: 2px solid #c4503c; outline-offset: 2px; }
.filtro-decadas .deca.activa,
.filtro-decadas .deca:has(input:checked) {
  background: #1a1208;
  border-color: #1a1208;
  color: #fff9f5;
}

/* La llave del año va pegada al riel, adentro del mismo bloque: es la
   misma conversación. Un poco de aire arriba y nada más — sin línea, que
   la línea es lo que separa un filtro del siguiente. */
.filtro-ver { margin-top: 12px; }
.filtro-ver .llave-txt { font-size: 13px; }

@media (max-width: 700px) {
  .listado-titulo-xl { font-size: 30px; }
}

/* ============================================================
   PROPORCIONES CARTER EN LISTADOS: sidebar 340, cards compactas
   ============================================================ */

.listado-layout { grid-template-columns: 340px 1fr; gap: 28px; }

.filtros { padding: 22px 20px; }
.filtro-select, .filtro-rango input { padding: 13px 14px; font-size: 15px; }
.filtro-grupo { margin-bottom: 18px; }

.listado-resultados .dpp-similares { grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: 24px; }
.listado-resultados .dpp-sim-titulo { font-size: 17px; }
.listado-resultados .dpp-sim-precio { font-size: 22px; }

@media (max-width: 980px) {
  .listado-layout { grid-template-columns: 1fr; }
}

/* ============================================================
   CHIPS DE CARD (NUEVO / VERIFICADA) + CORAZÓN DE FAVORITOS
   ============================================================ */

.card-chips {
  position: absolute;
  top: 10px; left: 10px;
  display: flex;
  gap: 6px;
  z-index: 2;
}

.card-chip-nuevo, .card-chip-verif {
  position: static;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  padding: 4px 10px;
  border-radius: 4px;
}
.card-chip-nuevo { background: #c4503c; color: #fff9f5; }
.card-chip-verif { background: #c79749; color: #1a1208; }

.card-fav {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 3;
  width: 34px; height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 253, 249, .92);
  color: #473b31;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
  transition: transform .12s ease, color .15s ease;
}
.card-fav svg { fill: none; }
.card-fav:hover { transform: scale(1.1); color: #c4503c; }
.card-fav.es-fav { color: #c4503c; }
.card-fav.es-fav svg { fill: #c4503c; }

/* Ícono corazón del header */
.hdr-favs {
  display: inline-flex;
  align-items: center;
  color: #473b31 !important;
}
.hdr-favs:hover { color: #c4503c !important; }
.hdr-favs svg { fill: none; }

/* Corazón transparente como Carter: solo el trazo sobre la foto */
.card-fav {
  background: transparent;
  box-shadow: none;
  width: 30px;
  height: 30px;
  color: #ffffff;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.45));
}
.card-fav:hover { color: #ffffff; transform: scale(1.15); }
.card-fav.es-fav { color: #c4503c; filter: drop-shadow(0 1px 3px rgba(0,0,0,.3)); }
.card-fav svg { width: 22px; height: 22px; }

/* ============================================================
   MODAL DE LOGIN (fade rápido, estilo Carter)
   ============================================================ */

.pulpa-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 7000;
  background: rgba(14, 10, 6, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity .2s ease-out;
}
.pulpa-modal-overlay.visible { opacity: 1; }

.pulpa-modal {
  position: relative;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .35);
  width: 100%;
  max-width: 420px;
  padding: 30px 32px 26px;
  transform: translateY(10px);
  transition: transform .2s ease-out;
}
.pulpa-modal-overlay.visible .pulpa-modal { transform: translateY(0); }

.pulpa-modal-x {
  position: absolute;
  top: 14px; right: 16px;
  border: 0;
  background: none;
  font-size: 16px;
  color: #473b31;
  cursor: pointer;
  padding: 4px;
}
.pulpa-modal-x:hover { color: #c4503c; }

.pulpa-modal-titulo {
  font-size: 22px;
  font-weight: 700;
  color: #0f0b09;
  margin: 0 0 4px;
}

.pulpa-modal-bajada {
  font-size: 14px;
  color: #5a4e44;
  margin: 0 0 18px;
}

.pulpa-modal-form { display: flex; flex-direction: column; gap: 12px; }

/* Misma razón que en pulpa_archivo.css: el padding y el borde de un
   campo de texto, aplicados a una casilla, la vuelven un rectángulo. */
.pulpa-modal-form input:not([type=checkbox]) {
  border: 1px solid #d9cbb4;
  border-radius: 8px;
  padding: 13px 14px;
  font-family: Roboto, sans-serif;
  font-size: 15px;
  color: #1a1208;
  outline: none;
}
.pulpa-modal-form input:not([type=checkbox]):focus { border-color: #8b3a2a; }

.pulpa-modal-form .dpp-btn-primary { width: 100%; }

.pulpa-modal-registro {
  font-size: 13.5px;
  color: #5a4e44;
  text-align: center;
  margin: 16px 0 0;
}
.pulpa-modal-registro a { color: #8b3a2a; font-weight: 700; text-decoration: none; }
.pulpa-modal-registro a:hover { text-decoration: underline; }

/* Fix crítico: oculto de verdad cuando está hidden (display:flex le ganaba) */
.pulpa-modal-overlay[hidden] { display: none; }

/* Capa de fondo del banner rotativo: solo la foto hace crossfade */
.home-banner-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 35%;
  transition: opacity .45s ease;
  opacity: 1;
}
.home-banner-shade { z-index: 1; }

/* ============================================================
   CARRUSEL DE LA LANDING — 4 cards y media visibles (Carter)
   ============================================================ */

.home-carrusel-wrap { position: relative; }

.home-carrusel {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 6px;
}
.home-carrusel::-webkit-scrollbar { display: none; }

.home-carrusel .dpp-sim-card {
  flex: 0 0 calc((100% - 4 * 24px) / 4.5);
  scroll-snap-align: start;
}

.home-carrusel-flecha {
  position: absolute;
  top: 38%;
  transform: translateY(-50%);
  z-index: 5;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  border: 1px solid #e0d5bd;
  background: #f4ecd9;
  color: #1a1208;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(26, 18, 8, .18);
  transition: background .15s;
}
.home-carrusel-flecha:hover { background: #eadfc4; }
.home-carrusel-flecha.prev { left: -14px; }
.home-carrusel-flecha.next { right: -14px; }

@media (max-width: 900px) {
  .home-carrusel .dpp-sim-card { flex-basis: calc((100% - 24px) / 1.6); }
  .home-carrusel-flecha { display: none; }
}

/* ============================================================
   CONTENEDOR CARTER: máx 1470px centrado con márgenes reales
   (el .wrap viejo de v11 dejaba el carrusel de borde a borde)
   ============================================================ */

.home-carter .wrap,
.home-banner-content,
.dpp-body .dpp-wrap,
.topstrip-inner,
.header-inner,
.catnav-inner {
  max-width: 1470px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 28px;
  padding-right: 28px;
  box-sizing: border-box;
}

/* El carrusel se recorta dentro del contenedor (la media card se corta ahí, no en la pantalla) */
.home-carrusel { overflow-x: auto; }
.home-carrusel-wrap { max-width: 100%; }

/* ============================================================
   CORRECCIÓN CARTER REAL:
   - HOME fluida a todo el ancho con padding ~30px (carrusel casi
     de borde a borde, cards grandes, como Latest Arrivals)
   - Los LISTADOS/FICHA se mantienen contenidos a 1470
   ============================================================ */

.home-carter .wrap,
.home-banner-content,
.topstrip-inner,
.header-inner,
.catnav-inner {
  max-width: none !important;
  padding-left: 30px;
  padding-right: 30px;
}

/* Flechas del carrusel montadas sobre el borde de las cards (como Carter) */
.home-carrusel-flecha.prev { left: 12px; }
.home-carrusel-flecha.next { right: 12px; }
.home-carrusel-flecha { top: 34%; width: 44px; height: 44px; border-radius: 6px; }

/* Título y precio de card acompañan el tamaño mayor */
.home-carrusel .dpp-sim-titulo { font-size: 18px; }

/* ============================================================
   HEADER: aire entre la tira y el buscador + buscador afinado
   ============================================================ */

.sticky-header .header-inner {
  padding-top: 26px;
  padding-bottom: 22px;
}

.header-search {
  max-width: 500px;
  border-radius: 4px;
  border: 1px solid #c9bca6;
  box-shadow: 0 1px 3px rgba(26, 18, 8, .07);
}
.header-search input { padding: 17px 18px; }
.header-search button { border-radius: 0 3px 3px 0; }
.header-search:focus-within { border-color: #8b3a2a; }

/* Fix definitivo del ancho: el .wrap de v11 usa width:min(1180px,...),
   hay que pisar width, no solo max-width */
.home-carter .wrap,
.home-banner-content,
.topstrip-inner,
.header-inner,
.catnav-inner {
  width: auto !important;
  max-width: none !important;
}

/* Listados y ficha: contenidos pero generosos (ancho Carter de listado) */
.dpp-body .dpp-wrap {
  width: auto !important;
  max-width: 1470px !important;
}

/* Fix carrusel: gap consistente con el cálculo de 4.5 y flechas siempre arriba */
.home-carrusel { gap: 24px !important; }
.home-carrusel .dpp-sim-card { flex: 0 0 calc((100% - 4 * 24px) / 4.5) !important; }
.home-carrusel-flecha { z-index: 20; }

/* ============================================================
   BANNER PROMO INTERMEDIO (como "Shop Vintage Gibson" de Carter)
   ============================================================ */

.home-promo {
  position: relative;
  min-height: 300px;
  display: flex;
  align-items: center;
  background-color: #14100a;
  background-size: cover;
  background-position: center 40%;
  margin: 18px 0;
}
.home-promo-shade {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(14,10,6,.15) 40%, rgba(14,10,6,.78) 75%);
}
.home-promo-content {
  position: relative;
  z-index: 2;
  margin-left: auto;
  text-align: right;
  padding: 40px 60px;
}
.home-promo-content h2 {
  font-family: Roboto, sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 3vw, 40px);
  color: #f7f3ed;
  margin: 0 0 6px;
  letter-spacing: -.01em;
}
.home-promo-content p {
  font-family: Roboto, sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(247,243,237,.85);
  margin: 0 0 20px;
}
.home-promo-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f7f3ed;
  color: #1a1208;
  font-family: Roboto, sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 13px 26px;
  border-radius: 4px;
  text-decoration: none;
}
.home-promo-btn:hover { background: #ffffff; }

/* Bajada de sección (bajo el título de cada fila) */
.home-seccion-bajada {
  font-size: 15px;
  color: #5a4e44;
  margin: 4px 0 0;
}

/* ============================================================
   SEPARADOR NEWSLETTER (Sign up for our newsletter, Carter/Norman's)
   ============================================================ */

.home-news {
  background: #f4ecd9;
  border-top: 1px solid #e5d9bf;
  border-bottom: 1px solid #e5d9bf;
  padding: 40px 0;
  margin: 18px 0;
}

/* ══ LA BANDA DE LAS TIENDAS (landing) ════════════════════════════════
   Misma forma que .home-news —copy a la izquierda, acción a la derecha—
   pero oscura. Van una abajo de la otra a propósito y tienen que verse
   distintas: la clara invita a una persona a sumarse, la oscura le habla
   a un negocio. Dos bandas iguales seguidas se leen como una sola y la
   segunda no la registra nadie. */
.home-tienda {
  background: #241a10;
  color: #f4ecd9;
  padding: 44px 0;
  margin: 18px 0;
}
.home-tienda-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.home-tienda-rot {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: #c79749; font-weight: 700; margin: 0 0 8px;
}
/* Con !important porque pulpa_archivo.css pinta TODOS los `main h2` con
   `color: var(--ar-texto) !important` —el color del texto sobre papel—
   y acá el fondo es marrón oscuro: el título quedaba negro sobre negro,
   invisible. También le impone el tamaño en 20px, así que si se quiere
   más grande hay que decirlo igual de fuerte. */
.home-tienda h2 {
  margin: 0 0 8px;
  color: #fff9f5 !important;
  font-size: 27px !important;
}
.home-tienda p { margin: 0; color: #d8ccb8; font-size: 15px; line-height: 1.55; max-width: 56ch; }
.home-tienda-btn {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: #c4503c; color: #fff9f5 !important;
  padding: 15px 28px; border-radius: 10px;
  font-size: 15px; font-weight: 700; text-decoration: none;
  transition: background .14s;
}
.home-tienda-btn:hover { background: #a83d31; }
@media (max-width: 720px) {
  .home-tienda { padding: 28px 0; }
  .home-tienda-inner { flex-direction: column; align-items: stretch; gap: 18px; }
  .home-tienda-btn { width: 100%; }
}

.home-news-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.home-news-copy h2 {
  font-family: Roboto, sans-serif;
  font-weight: 700;
  font-size: 28px;
  color: #0f0b09;
  margin: 0 0 6px;
}
.home-news-copy p { font-size: 15px; color: #5a4e44; margin: 0; max-width: 480px; }

.home-news-form {
  display: flex;
  gap: 12px;
  flex: 1;
  max-width: 520px;
}
.home-news-form input {
  flex: 1;
  border: 1px solid #c9bca6;
  border-radius: 4px;
  background: #fff;
  padding: 14px 16px;
  font-family: Roboto, sans-serif;
  font-size: 15px;
  outline: none;
}
.home-news-form input:focus { border-color: #8b3a2a; }
.home-news-form .dpp-btn-primary { flex: 0 0 auto; }

@media (max-width: 700px) {
  .home-news-inner { flex-direction: column; align-items: stretch; }
  .home-news-form { max-width: 100%; flex-direction: column; }
}

/* Corazón de favorito en la ficha, al lado del título */
.dpp-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.ficha-fav {
  position: static !important;
  flex-shrink: 0;
  margin-top: 6px;
  color: #473b31 !important;
  filter: none !important;
}
.ficha-fav:hover { color: #c4503c !important; transform: scale(1.12); }
.ficha-fav.es-fav { color: #c4503c !important; }

/* Fix scrollbar horizontal: el promo content desbordaba por padding sin border-box */
.home-promo-content { box-sizing: border-box; max-width: 100%; }
.home-carter, .home-carter body { overflow-x: clip; }
html, body { overflow-x: clip; }

/* ============================================================
   CLICK-TO-ZOOM (como Carter): pill + lightbox con lupa
   ============================================================ */

#dpp-photo-zoomable { cursor: zoom-in; }

.dpp-zoom-pill {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(14, 10, 6, .62);
  color: #f7f3ed;
  font-size: 12px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 999px;
  pointer-events: none;
  backdrop-filter: blur(3px);
  z-index: 3;
}

.dpp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 8000;
  background: rgba(10, 8, 5, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease-out;
}
.dpp-lightbox.abierta { opacity: 1; pointer-events: auto; }

.dpp-lightbox img {
  max-width: 92vw;
  max-height: 92vh;
  cursor: zoom-in;
  transition: transform .25s ease;
  user-select: none;
}
.dpp-lightbox img.ampliada {
  transform: scale(2.2);
  cursor: zoom-out;
}

.dpp-lightbox-x {
  position: absolute;
  top: 18px;
  right: 24px;
  z-index: 2;
  border: 0;
  background: rgba(247, 243, 237, .12);
  color: #f7f3ed;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 17px;
  cursor: pointer;
}
.dpp-lightbox-x:hover { background: rgba(247, 243, 237, .25); }

/* ============================================================
   FIX 1: botón Sumarme del newsletter (heredaba ancho completo)
   ============================================================ */
.home-news-form { flex: 0 1 520px; }
.home-news-form .dpp-btn-primary {
  width: auto !important;
  flex: 0 0 auto !important;
  white-space: nowrap;
  padding: 0 26px !important;
}

/* ============================================================
   FIX 2: alineación del nav de categorías (a vs button)
   ============================================================ */
.catnav-inner { align-items: center; }
.catnav a.catnav-link,
.catnav-toggle {
  font-family: Roboto, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  line-height: 1 !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  border: 0;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
  color: #1a1208;
}
.catnav a.catnav-link:hover, .catnav-toggle:hover { color: #8b3a2a; }

/* Fonts del nav a tamaño Carter (18px) y buscador central más alto */
.catnav a.catnav-link,
.catnav-toggle {
  font-size: 17.5px !important;
}
.catnav-inner { gap: 38px; padding: 15px 0; }

.header-search { max-width: 540px; }
.header-search input {
  padding: 21px 20px;
  font-size: 16px;
}
.header-search button { padding: 0 26px; }
.header-search button svg { width: 21px; height: 21px; }

/* Tira superior: grid 1fr/auto/1fr para que el rotador quede SIEMPRE centrado */
.topstrip-inner {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}
.topstrip-inner > .topstrip-item:first-child { justify-self: start; }
.topstrip-rotador { justify-self: center; flex: none; text-align: center; }
.topstrip-inner > a.topstrip-item:last-child { justify-self: end; }

@media (max-width: 700px) {
  .topstrip-inner { grid-template-columns: 1fr; }
  .topstrip-inner > a.topstrip-item:last-child { display: none; }
}

/* Más aire arriba del buscador y un toque más angosto */
.sticky-header .header-inner { padding-top: 34px; padding-bottom: 24px; }
.header-search { max-width: 500px; }

/* ============================================================
   COMBO DE MARCAS CON PILLS ADENTRO (como el Brand de Carter)
   ============================================================ */

.marca-combo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  border: 1px solid #d9cbb4;
  border-radius: 8px;
  background: #fff;
  padding: 7px 8px;
  min-height: 48px;
  box-sizing: border-box;
}
.marca-combo:focus-within { border-color: #8b3a2a; }

.marca-combo .marca-pill { margin: 0; }

.marca-combo-select {
  flex: 1;
  min-width: 96px;
  border: 0;
  background: transparent;
  font-family: Roboto, sans-serif;
  font-size: 14px;
  color: #5a4e44;
  padding: 6px 2px;
  outline: none;
  cursor: pointer;
}

/* Nav de categorías: centrado como Carter y con padding lateral restaurado */
.catnav-inner {
  padding: 15px 30px !important;
  justify-content: center;
}
@media (max-width: 900px) {
  .catnav-inner { justify-content: flex-start; }
}

/* Más separación arriba del buscador central */
.sticky-header .header-inner { padding-top: 52px !important; padding-bottom: 26px; }

/* Tira superior más suave: fondo más claro y tipografía sin tanta negrita */
.topstrip { background: #faf6ec; border-bottom: 1px solid #eee5d2; }
.topstrip-item { font-weight: 400 !important; color: #473b31; }
.topstrip-rotador { font-weight: 500 !important; }
a.topstrip-item { color: #8b3a2a; }

/* Buscador central: márgenes verticales generosos (triple) */
.sticky-header .header-inner { padding-top: 64px !important; padding-bottom: 58px !important; }

/* Modal en modo registro: filas dobles, select y checkbox */
.pulpa-modal { max-width: 470px; }
.pulpa-modal-fila { display: flex; gap: 10px; }
.pulpa-modal-fila input { flex: 1; min-width: 0; }
.pulpa-modal-select {
  border: 1px solid #d9cbb4;
  border-radius: 8px;
  background: #fff;
  padding: 13px 12px;
  font-family: Roboto, sans-serif;
  font-size: 14px;
  color: #1a1208;
  outline: none;
}
.pulpa-modal-acepto {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 12.5px;
  color: #5a4e44;
  line-height: 1.45;
  cursor: pointer;
}
.pulpa-modal-acepto input[type=checkbox] {
  -webkit-appearance: checkbox; appearance: checkbox;
  width: 18px; height: 18px; min-width: 18px;
  margin: 1px 0 0; padding: 0; border: 0; border-radius: 0;
  background: none; accent-color: #c4503c; flex: none; cursor: pointer;
}
.pulpa-modal-acepto a { color: #8b3a2a; }

/* MEDIDAS CARTER EXACTAS: buscador 70px alto x 500 ancho, 31px arriba y abajo */
.sticky-header .header-inner {
  padding-top: 31px !important;
  padding-bottom: 31px !important;
}
.header-search {
  max-width: 500px;
  height: 70px;
}
.header-search input {
  padding: 0 20px;
  font-size: 16px;
  height: 100%;
}
.header-search button { height: 100%; }

/* Fix definitivo del margen del buscador: v11 fijaba height:76px al header-inner */
.sticky-header .header-inner {
  height: auto !important;
  min-height: 0 !important;
}

/* Menú de cuenta del usuario (dropdown con Salir) */
.hdr-cuenta-item { position: relative; }
.hdr-cuenta-menu { right: 0; left: auto; min-width: 190px; }
.hdr-cuenta.catnav-toggle {
  text-transform: none !important;
  font-size: 15px !important;
  letter-spacing: 0 !important;
  color: #8b3a2a !important;
}
.hdr-cuenta-menu a:first-child { font-weight: 400; color: rgb(15,11,9); }
.hdr-salir {
  border-top: 1px solid #eee5d2;
  margin-top: 6px;
  padding-top: 12px !important;
  color: #c4503c !important;
  font-weight: 700 !important;
}

/* ============================================================
   RADAR: botón en búsquedas + lista de Mi radar
   ============================================================ */

.listado-resumen-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.listado-resumen-fila .listado-resumen { margin-bottom: 0; }

.radar-activar {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #8b3a2a;
  background: transparent;
  color: #8b3a2a;
  font-family: Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 11px 18px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.radar-activar:hover { background: #8b3a2a; color: #fff9f5; }

.radar-lista { display: flex; flex-direction: column; gap: 14px; max-width: 860px; }

.radar-item {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #fffdf9;
  border: 1px solid #e5dccd;
  border-radius: 8px;
  padding: 18px 20px;
}

.radar-icono { color: #c4503c; flex: none; }

.radar-info { flex: 1; min-width: 0; }
.radar-titulo { font-family: Roboto, sans-serif; font-size: 17px; font-weight: 500; color: #1a1208; }
.radar-meta { font-size: 12.5px; color: #8b8073; margin-top: 3px; }

.radar-acciones { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.radar-ver { font-size: 13.5px; font-weight: 700; color: #8b3a2a; text-decoration: none; }
.radar-ver:hover { text-decoration: underline; }

.radar-btn {
  border: 1px solid #d9cbb4;
  background: #fff;
  color: #473b31;
  font-family: Roboto, sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
}
.radar-btn:hover { border-color: #8b3a2a; color: #8b3a2a; }
.radar-borrar:hover { border-color: #c4503c; color: #c4503c; }

@media (max-width: 700px) {
  .radar-item { flex-direction: column; align-items: flex-start; }
}

/* Alcance del radar: badge + hint + botón extender */
.radar-alcance {
  display: inline-block;
  margin-left: 10px;
  font-family: Roboto, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  background: #f4ecd9;
  color: #8b8073;
  vertical-align: middle;
}
.radar-alcance.todas { background: #c4503c; color: #fff9f5; }

.radar-hint {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #8b6f4e;
  background: #faf3e3;
  border-left: 3px solid #c79749;
  padding: 8px 12px;
  max-width: 520px;
}
.radar-hint b { color: #6b4a2c; }

.radar-extender { border-color: #c79749; color: #8b6f4e; }
.radar-extender:hover { border-color: #8b3a2a; color: #8b3a2a; }

/* Cola de matches: aviso, botón aprobar e historial */
.match-aviso {
  background: #eef4e8;
  border: 1px solid #cfdec2;
  color: #3e5230;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  margin-top: 6px;
}
.match-aprobar { border-color: #6f8f5a; color: #3e5230; }
.match-aprobar:hover { background: #6f8f5a; color: #fff; border-color: #6f8f5a; }

.match-historial { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; max-width: 1000px; }
.match-hist-fila {
  display: flex;
  gap: 14px;
  align-items: baseline;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: #473b31;
  padding: 8px 12px;
  background: #fffdf9;
  border: 1px solid #eee5d2;
  border-radius: 8px;
}
.match-hist-estado.aprobado { color: #3e5230; font-weight: 700; }
.match-hist-estado.rechazado { color: #c4503c; font-weight: 700; }
.match-hist-meta { color: #8b8073; font-size: 12.5px; }

/* ============================================================
   FORM DE PIEZA (admin) EN LENGUAJE CARTER
   Pisa los estilos viejos de admin_forms.css
   ============================================================ */

.admin-body { background: #f7f3ed !important; }

.admin-cont { max-width: 1100px; }

.admin-titulo {
  font-family: Roboto, sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(26px, 3vw, 36px) !important;
  color: #0f0b09 !important;
  letter-spacing: -.01em;
}
.admin-bajada { font-family: Roboto, sans-serif !important; color: #5a4e44 !important; }

.admin-camino, .admin-camino a {
  font-family: Roboto, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #8b3a2a !important;
}
.admin-camino strong { color: #5a4e44 !important; }

/* Cards de sección */
.admin-form-card {
  background: #fffdf9 !important;
  border: 1px solid #e5dccd !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
.admin-form-card h2 {
  font-family: Roboto, sans-serif !important;
  font-weight: 700 !important;
  color: #0f0b09 !important;
}
.admin-form-head p { font-family: Roboto, sans-serif !important; color: #8b8073 !important; }

/* Inputs, selects y textareas */
.admin-form input[type="text"],
.admin-form input[type="number"],
.admin-form input[type="search"],
.admin-form select,
.admin-form textarea,
.admin-cont input[type="text"],
.admin-cont input[type="number"],
.admin-cont select,
.admin-cont textarea {
  border: 1px solid #d9cbb4 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  font-family: Roboto, sans-serif !important;
  font-size: 14.5px !important;
  color: #1a1208 !important;
  padding: 12px 13px !important;
  box-shadow: none !important;
}
.admin-form input:focus, .admin-form select:focus, .admin-form textarea:focus,
.admin-cont input:focus, .admin-cont select:focus, .admin-cont textarea:focus {
  border-color: #8b3a2a !important;
  outline: none !important;
}

.admin-form label, .admin-cont label {
  font-family: Roboto, sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #5a4e44 !important;
}

/* Botones */

/* EL TEXTO ADENTRO DEL BOTON, CENTRADO DE VERDAD.
   Tenian height:46px y nada que dijera donde va el texto: en un <a>, eso
   lo deja apoyado arriba del todo, no en el medio. Se veia como si la
   palabra se hubiera caido hacia el techo.
   Y el text-indent no es un capricho: letter-spacing agrega el espacio
   TAMBIEN despues de la ultima letra, asi que el texto queda corrido
   media letra a la izquierda del centro. Devolver ese mismo espacio como
   sangria lo acomoda. Es el detalle que separa "casi centrado" de
   centrado. */
.boton, .boton-solido, .boton-borde,
.admin-cont .boton-solido, .admin-cont .boton-borde {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-indent: .03em;
  box-sizing: border-box;
}

.boton-solido, .admin-cont .boton-solido {
  background: #c4503c !important;
  border: 1px solid #8b3a2a !important;
  color: #fff9f5 !important;
  border-radius: 8px !important;
  font-family: Roboto, sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .03em;
  height: 46px;
  padding: 0 22px !important;
}
.boton-solido:hover { background: #8b3a2a !important; }

.boton-borde, .admin-cont .boton-borde {
  background: transparent !important;
  border: 1px solid #473b31 !important;
  color: #8b3a2a !important;
  border-radius: 8px !important;
  font-family: Roboto, sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .03em;
  height: 46px;
  padding: 0 20px !important;
}
.boton-borde:hover { border-color: #8b3a2a !important; background: rgba(196,80,60,.05) !important; }

/* Alertas */
.admin-alerta-ok {
  background: #eef4e8 !important;
  border: 1px solid #cfdec2 !important;
  color: #3e5230 !important;
  border-radius: 8px !important;
  font-family: Roboto, sans-serif !important;
}
.admin-alerta-error {
  background: #faeeec !important;
  border: 1px solid #ecc9c2 !important;
  color: #8b3a2a !important;
  border-radius: 8px !important;
  font-family: Roboto, sans-serif !important;
}

/* Barra de acciones fija abajo */
/* LA BARRA DE ACCIONES NO ES UNA TARJETA: ES EL PISO DE LA PAGINA.
   Estaba en rgba(255,253,249) —practicamente blanco— sobre un fondo
   crema, asi que se recortaba como un bloque flotante justo debajo del
   formulario. Va del color del fondo: se apoya, no se despega. */
.admin-form-actions {
  background: var(--crema-alt, #F4F2EB) !important;
  border-top: 0 !important;
  backdrop-filter: blur(4px);
}

/* Guía de fotos y drop zone */
.admin-fotos-guia .admin-fotos-consejo {
  font-family: Roboto, sans-serif !important;
  background: #faf6ec !important;
  border: 1px solid #eee5d2 !important;
  border-radius: 8px !important;
  color: #473b31 !important;
}
/* LA REGLA NO ES UN CONSEJO MAS — 15/09/2026.
   El bloque de arriba pisa el fondo y el borde de TODOS los consejos con
   !important, asi que el tono terracota de la regla tiene que ganarse
   aca o no se ve. La separacion es a proposito: cuatro cajitas dicen que
   hacer y esta dice que no, y en el mismo color eran cinco iguales. */
.admin-fotos-guia .admin-fotos-consejo-regla {
  background: #fbf1ee !important;
  border-color: #ecd2ca !important;
}

.admin-fotos-drop {
  border: 2px dashed #d9cbb4 !important;
  border-radius: 8px !important;
  background: #faf6ec !important;
}
.admin-fotos-drop:hover { border-color: #8b3a2a !important; }

/* Zoom en el lugar (como Carter): la foto se amplía dentro del marco */
#dpp-photo-zoomable { cursor: zoom-in; }
#dpp-photo-zoomable img {
  transition: transform .25s ease;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}
#dpp-photo-zoomable.zoomeada { cursor: grab; }
#dpp-photo-zoomable.zoomeada:active { cursor: grabbing; }
#dpp-photo-zoomable.zoomeada img { transition: none; }
#dpp-photo-zoomable.zoomeada .dpp-zoom-pill,
#dpp-photo-zoomable.zoomeada .dpp-badges,
#dpp-photo-zoomable.zoomeada .dpp-nav { opacity: 0; pointer-events: none; }
.dpp-zoom-pill, .dpp-badges, .dpp-nav { transition: opacity .2s ease; }

/* Foto sin bordes blancos: llena el marco completo (cover, no contain) */
.dpp-media-card .dpp-photo-main img {
  object-fit: cover !important;
}

/* Zoomeada sigue al mouse: cursor de lupa para salir, no manito en desktop */
#dpp-photo-zoomable.zoomeada { cursor: zoom-out; }
#dpp-photo-zoomable.zoomeada:active { cursor: zoom-out; }

/* ============================================================
   MARCO A MEDIDA DE LA FOTO: sin bordes blancos Y sin recorte.
   El contenedor toma la proporción natural de la imagen
   (tope 68vh para fotos muy verticales). El zoom 1:1 real.
   ============================================================ */

.dpp-media-card .dpp-photo-main {
  height: auto !important;
  aspect-ratio: auto;
}

.dpp-media-card .dpp-photo-main img {
  position: static;
  display: block;
  width: 100% !important;
  height: auto !important;
  max-height: 68vh;
  object-fit: cover !important;   /* solo recorta si excede el tope de alto */
}

/* Ficha técnica bajo la foto (columna izquierda, como Carter) */
.dpp-ficha-bajo-foto { margin-top: 22px; }
.dpp-ficha-titulo {
  font-family: Roboto, sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #0f0b09;
  margin: 0 0 12px;
}
.dpp-ficha-bajo-foto .dpp-ficha-tabla { max-width: none; background: #fffdf9; }

/* ============================================================
   EDITOR DE HISTORIAL (eventos del DPP en el form de pieza)
   ============================================================ */

.eventos-lista { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }

.evento-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: #faf6ec;
  border: 1px solid #eee5d2;
  border-radius: 8px;
  padding: 10px 14px;
}

.evento-info { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.evento-fecha { font-size: 12px; color: #8b8073; font-weight: 700; }
.evento-tipo {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  background: #ead5c8; color: #6b4a2c; padding: 2px 9px; border-radius: 999px;
}
.evento-titulo { font-size: 14.5px; color: #1a1208; }
.evento-tecnico { font-size: 12.5px; color: #8b8073; }
.evento-vis { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; padding: 2px 8px; border-radius: 4px; }
.evento-vis.publica { background: #6f8f5a; color: #fff; }
.evento-vis.solo_aliados { background: #c79749; color: #1a1208; }
.evento-vis.privada { background: #d9cbb4; color: #473b31; }

.evento-borrar {
  border: 1px solid #d9cbb4; background: #fff; color: #8b8073;
  font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 8px; cursor: pointer;
}
.evento-borrar:hover { border-color: #c4503c; color: #c4503c; }

.evento-form { border-top: 1px solid #eee5d2; padding-top: 18px; }
.evento-form-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 16px;
  align-items: end;
}
.evento-col2 { grid-column: span 2; }
.evento-form-btn { grid-column: span 4; }
.evento-form-grid label { display: block; margin-bottom: 5px; }

@media (max-width: 800px) {
  .evento-form-grid { grid-template-columns: 1fr; }
  .evento-col2, .evento-form-btn { grid-column: span 1; }
}

/* Toggle de visibilidad por evento (el poseedor decide) */
.evento-acciones { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.evento-vis-select {
  border-radius: 8px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  padding: 7px 10px !important;
  cursor: pointer;
  border: 1px solid #d9cbb4 !important;
  background: #fff !important;
}
.evento-vis-select.publica { border-color: #6f8f5a !important; color: #3e5230 !important; }
.evento-vis-select.solo_aliados { border-color: #c79749 !important; color: #8b6f4e !important; }
.evento-vis-select.privada { color: #8b8073 !important; }

@media (max-width: 800px) {
  .evento-fila { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   FORM DE EVENTO ORDENADO: grid con áreas fijas
   ============================================================ */

.evento-form-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  grid-template-areas:
    "tipo   fecha  tecnico"
    "titulo titulo titulo"
    "desc   desc   desc"
    "vis    fuente btn" !important;
  gap: 16px 18px !important;
  align-items: end;
}

.ev-a-tipo    { grid-area: tipo; }
.ev-a-fecha   { grid-area: fecha; }
.ev-a-tecnico { grid-area: tecnico; }
.ev-a-titulo  { grid-area: titulo; }
.ev-a-desc    { grid-area: desc; }
.ev-a-vis     { grid-area: vis; }
.ev-a-fuente  { grid-area: fuente; }
.ev-a-btn     { grid-area: btn; display: flex; justify-content: flex-end; }

.evento-form-grid label { display: block; margin-bottom: 6px; }
.evento-form-grid input,
.evento-form-grid select,
.evento-form-grid textarea {
  width: 100% !important;
  box-sizing: border-box;
}
.evento-form-grid textarea {
  min-height: 84px !important;
  resize: vertical;
}
.ev-a-btn .boton-solido { width: auto; }

@media (max-width: 800px) {
  .evento-form-grid {
    grid-template-columns: 1fr !important;
    grid-template-areas: "tipo" "fecha" "tecnico" "titulo" "desc" "vis" "fuente" "btn" !important;
  }
  .ev-a-btn { justify-content: stretch; }
  .ev-a-btn .boton-solido { width: 100%; }
}

/* ============================================================
   NAV DE SALTOS del form de pieza (sticky, acceso rápido)
   ============================================================ */

html { scroll-behavior: smooth; }
.admin-form-card { scroll-margin-top: 74px; }

.form-saltos {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  background: rgba(247, 243, 237, .95);
  backdrop-filter: blur(5px);
  border: 1px solid #e5dccd;
  border-radius: 999px;
  padding: 7px 10px;
  margin: 14px 0 20px;
  width: fit-content;
}

.form-saltos a {
  font-family: Roboto, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #473b31;
  text-decoration: none;
  padding: 8px 15px;
  border-radius: 999px;
  transition: background .15s, color .15s;
}
.form-saltos a:hover {
  background: #c4503c;
  color: #fff9f5;
}

@media (max-width: 700px) {
  .form-saltos { width: 100%; overflow-x: auto; flex-wrap: nowrap; border-radius: 12px; }
  .form-saltos a { white-space: nowrap; }
}

/* ============================================================
   EVENTOS COMPRIMIBLES (acordeón) + campo fecha prolijo
   ============================================================ */

/* Grid del form de evento: labels arriba parejos (no align end) */
.evento-form-grid { align-items: start !important; }
.evento-form-grid input[type="date"] {
  height: 47px !important;
  padding: 0 13px !important;
  font-family: Roboto, sans-serif !important;
  font-size: 14.5px !important;
  color: #1a1208 !important;
  -webkit-appearance: none;
  appearance: none;
}
.evento-form-grid input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .55;
}
.evento-form-grid select { height: 47px !important; }
.evento-form-grid input[type="text"] { height: 47px !important; }

/* Acordeón de eventos */
.evento-item {
  background: #faf6ec;
  border: 1px solid #eee5d2;
  border-radius: 8px;
  overflow: hidden;
}

.evento-resumen {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.evento-resumen::-webkit-details-marker { display: none; }
.evento-resumen:hover { background: #f4ecd9; }

.evento-caret {
  margin-left: auto;
  align-self: center;
  color: #8b8073;
  transition: transform .18s ease;
  flex: none;
}
.evento-item[open] .evento-caret { transform: rotate(180deg); }
.evento-item[open] .evento-resumen { border-bottom: 1px solid #eee5d2; }

.evento-detalle { padding: 14px 16px 16px; }
.evento-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: #473b31;
  margin: 0 0 10px;
  max-width: 720px;
}
.evento-meta-linea {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #8b8073;
  margin-bottom: 14px;
}
.evento-meta-linea b { color: #473b31; font-weight: 500; }

/* Edición inline dentro del acordeón */
.evento-form-edit { border-top: 0; padding-top: 0; }
.evento-form-edit .evento-form-grid { gap: 12px 16px !important; }
.evento-form-edit textarea { min-height: 70px !important; }
.evento-edit-acciones { align-items: end; }

.evento-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #eee5d2;
  font-size: 12px;
  color: #8b8073;
}
.evento-pie b { color: #473b31; font-weight: 500; }

/* Botón "Nuevo evento" que despliega el form de alta */
.evento-nuevo { margin-top: 18px; }

.evento-nuevo-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  list-style: none;
  background: transparent;
  border: 1px dashed #c4503c;
  color: #8b3a2a;
  border-radius: 8px;
  padding: 12px 20px;
  font-size: 13.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  transition: background .15s, color .15s;
  user-select: none;
}
.evento-nuevo-btn::-webkit-details-marker { display: none; }
.evento-nuevo-btn:hover { background: #c4503c; color: #fff9f5; }
.evento-nuevo[open] .evento-nuevo-btn {
  border-style: solid;
  background: #c4503c;
  color: #fff9f5;
  margin-bottom: 16px;
}
.evento-nuevo[open] .evento-nuevo-btn svg { transform: rotate(45deg); transition: transform .18s; }

.evento-nuevo .evento-form { border-top: 0; padding-top: 0; }

/* ── 31/08/2026 · EL HISTORIAL TRABADO ──
   Sin PulpaTag el bloque se sigue viendo entero: es la mejor explicación
   de qué habilita la placa. Pero se ve APAGADO, para que nadie empiece a
   escribir un evento que el servidor va a rechazar. Gris en vez de rojo,
   y el formulario atenuado y sin puntero. */
.evento-nuevo-trabado .evento-nuevo-btn {
  border-color: #cbbfb2;
  color: #8d7f70;
  cursor: default;
}
.evento-nuevo-trabado .evento-nuevo-btn:hover { background: transparent; color: #8d7f70; }
.evento-nuevo-trabado[open] .evento-nuevo-btn {
  background: transparent;
  border-style: dashed;
  color: #8d7f70;
}
.evento-trabado-aviso {
  margin: 14px 0 2px;
  padding: 13px 15px;
  border: 1px solid #e2d6c8;
  border-left: 3px solid #c4503c;
  border-radius: 8px;
  background: #fbf6f0;
  color: #6b5c4d;
  font-size: 13.5px;
  line-height: 1.55;
}
.evento-trabado-aviso b { color: #473b31; }
.evento-nuevo-trabado .evento-form {
  opacity: .5;
  pointer-events: none;
}

/* La columna de info ya no necesita scroll propio (venía de cuando la foto
   ocupaba 100vh). Con la foto a proporción, el scroll era el hueco vacío. */
.dpp-info {
  max-height: none !important;
  overflow-y: visible !important;
}

/* Sin alturas heredadas: el layout se adapta al contenido real */
.dpp-layout { min-height: 0 !important; }
.dpp-media, .dpp-info { align-self: start; }

/* ============================================================
   TIRA DE ACCESOS RÁPIDOS (rescatada del catálogo viejo)
   ============================================================ */

.tira-rapida {
  background: #fffdf9;
  border-bottom: 1px solid #e5dccd;
}

.tira-rapida-inner {
  display: flex;
  gap: 6px;
  padding: 12px 30px;
  overflow-x: auto;
  scrollbar-width: none;
  justify-content: center;
}
.tira-rapida-inner::-webkit-scrollbar { display: none; }

.tr-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 82px;
  padding: 8px 10px 7px;
  border-radius: 8px;
  text-decoration: none;
  color: #5a4e44;
  border-bottom: 2px solid transparent;
  transition: color .15s, background .15s, border-color .15s;
}
.tr-item:hover { color: #8b3a2a; background: #faf6ec; }

.tr-item svg { width: 26px; height: 26px; flex: none; }

.tr-item span {
  font-family: Roboto, sans-serif;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.tr-item.activa {
  color: #c4503c;
  border-bottom-color: #c4503c;
}

@media (max-width: 700px) {
  .tira-rapida-inner { justify-content: flex-start; padding: 10px 14px; }
  .tr-item { min-width: 70px; }
  .tr-item svg { width: 22px; height: 22px; }
  .tr-item span { font-size: 11px; }
}

/* La tira ahora vive dentro del header: sin doble borde ni fondo propio */
.site-header .tira-rapida { background: transparent; border-bottom: 0; border-top: 1px solid #eee5d2; }
.site-header .tira-rapida-inner { padding: 10px 30px; }

/* Tira de íconos más grande: es la navegación principal del sitio */
/* Ancho fijo e igual para los 11, sin estirarse a todo el ancho: quedan
   como un bloque compacto y centrado. 90px es el piso real — lo marca
   "Esta semana", que mide 80,6px a 14px de fuente, más 4px de aire a cada
   lado. Por debajo de eso el texto se sale de la caja. */
.tr-item { flex: 0 0 90px; width: 90px; min-width: 0; padding: 12px 4px 10px; gap: 8px; }
.tr-item svg { width: 42px; height: 42px; }
.tr-item span { font-size: 14px; font-weight: 500; white-space: nowrap; }
.site-header .tira-rapida-inner { padding: 14px 20px; gap: 2px; }
.tr-item.activa { border-bottom-width: 3px; }

/* Centrado seguro: si los 11 ítems no entran, arranca desde la izquierda
   en vez de desbordar por los dos lados (el borde izquierdo quedaba cortado
   e inalcanzable porque scrollLeft no puede ser negativo). */
.tira-rapida-inner { justify-content: center; justify-content: safe center; }

@media (max-width: 900px) {
  .tr-item { min-width: 86px; padding: 10px; }
  .tr-item svg { width: 28px; height: 28px; }
  .tr-item span { font-size: 12.5px; }
}

/* ============================================================
   AJUSTES MÓVIL (verificados en viewport 390px)
   ============================================================ */

@media (max-width: 700px) {
  /* Header: logo y cuenta en una línea, buscador debajo */
  .sticky-header .header-inner { padding-top: 16px !important; padding-bottom: 14px !important; }
  .brand-main { font-size: 22px; }
  .header-search { height: 54px; }
  .header-search input { font-size: 15px; }

  /* La pill de zoom estorba en pantalla chica (ahí se usa pinch) */
  .dpp-zoom-pill { display: none; }

  /* Flechas de galería más chicas para no tapar la foto */
  .dpp-nav { width: 34px; height: 34px; }
  .dpp-nav-prev { left: 8px; }
  .dpp-nav-next { right: 8px; }

  /* Que se note que la tira scrollea: media card asomando al borde */
  .site-header .tira-rapida-inner { padding: 12px 14px; }

  /* Banner: menos alto, texto más contenido */
  .home-banner { min-height: 380px; }
  .home-banner h1 { font-size: 27px; }
  .home-banner p { font-size: 15px; }
  .home-banner-credito { font-size: 10.5px; padding: 5px 10px; }

  /* Ficha: título y precio proporcionados */
  .dpp-title { font-size: 21px !important; }
  .dpp-price { font-size: 22px !important; }
  .dpp-layout { padding: 0 12px; }
}

/* ============================================================
   LA RED: tiendas y aliados
   ============================================================ */

.red-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 18px;
  align-items: stretch;          /* todas las cards del mismo alto */
}

.red-card {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  background: #fffdf9;
  border: 1px solid #e5dccd;
  border-radius: 10px;
  padding: 20px;
  text-decoration: none;
  transition: border-color .15s, box-shadow .2s, transform .15s;
}
.red-card:hover {
  border-color: #d8c9ac;
  box-shadow: 0 6px 20px rgba(59, 42, 23, .09);
  transform: translateY(-2px);
}

/* EL LOGO. Antes iba dentro de un cuadrado beige con relleno: cada marca
   quedaba como una calcomanía pegada sobre un fondo que no era suyo, y las
   de fondo negro o blanco se veían como un bloque. Ahora el logo llena su
   cuadro y el cuadro se pinta con el color de fondo del PROPIO logo (misma
   rutina que las fotos, .foto-franjas): cada marca se ve como se ve ella. */
.red-logo {
  width: 76px; height: 76px;
  flex: none;
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(59, 42, 23, .09);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.red-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.red-logo-inicial { font: 700 30px Roboto, sans-serif; color: #8b3a2a; }

.red-info { min-width: 0; display: flex; flex-direction: column; height: 100%; }
.red-nombre {
  font: 600 19.5px/1.25 Roboto, sans-serif;
  color: #0f0b09; margin-bottom: 7px;
}

.red-meta {
  display: flex; gap: 7px; align-items: center; flex-wrap: wrap;
  font-size: 12.5px; color: #9a8f80;
}
/* La chapa de aliado bajó el tono: antes competía con el nombre de la tienda,
   que es lo que uno lee primero. Fundador y verificador sí van marcados. */
.red-nivel {
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: transparent; color: #a08c6f;
  box-shadow: inset 0 0 0 1px #e0d3ba;
}
.red-nivel.fundador { background: #c79749; color: #1a1208; box-shadow: none; }
.red-nivel.verificador { background: #6f8f5a; color: #fff; box-shadow: none; }

/* Dos renglones y corta: si no, una descripción larga desalinea toda la fila. */
.red-desc {
  font-size: 13px; color: #5a4e44; margin: 10px 0 0; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* El renglón de piezas se clava abajo: queda a la misma altura en toda la fila. */
.red-piezas {
  font-size: 13px; font-weight: 700; color: #8b3a2a;
  margin-top: auto; padding-top: 14px;
}
.red-piezas b { font-size: 16px; }
.red-sin-piezas { color: #a99d8d; font-weight: 600; }

/* Cabecera de la página de tienda */
.tienda-cabecera {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding-bottom: 24px;
  border-bottom: 1px solid #e5dccd;
}
.tienda-logo {
  width: 110px; height: 110px; flex: none;
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(59, 42, 23, .09);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.tienda-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tienda-logo .red-logo-inicial { font-size: 46px; }

/* La línea de rol: qué es esta casa dentro de la red. No depende del stock. */
.tienda-rol { font-size: 13.5px; color: #6f6a63; margin: 0 0 12px; }
.tienda-desc { font-size: 15px; color: #473b31; max-width: 640px; line-height: 1.6; margin: 0 0 12px; }
.tienda-links { display: flex; gap: 16px; flex-wrap: wrap; align-items: baseline; }
.tienda-links a { font-size: 13.5px; font-weight: 700; color: #8b3a2a; text-decoration: none; }
/* La ciudad, en el mismo renglon que el Instagram y la web. Igual cuerpo y
   peso que los enlaces —para que sea una linea y no dos— pero en gris: lo
   que no se puede clicar no se pinta del color de lo que si. */
.tienda-donde { font-size: 13.5px; font-weight: 700; color: #8a7d6f; }
.tienda-links a:hover { text-decoration: underline; }

@media (max-width: 700px) {
  .red-grid { grid-template-columns: 1fr; }
  .tienda-cabecera { flex-direction: column; gap: 16px; }
  .tienda-logo { width: 84px; height: 84px; }
}

/* Título de sección en página de tienda */
.tienda-seccion-titulo {
  font-family: Roboto, sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: #0f0b09;
  margin: 34px 0 18px;
}

/* Editor de logo de tienda en el perfil */
.tienda-logo-editor { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.tienda-logo-acciones { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.tienda-logo-nombre { font: 500 18px Roboto, sans-serif; color: #0f0b09; }
.tienda-logo-ayuda { font-size: 13px; color: #5a4e44; margin: 0; max-width: 460px; line-height: 1.5; }
.tienda-logo-ayuda a { color: #8b3a2a; font-weight: 700; }

.tienda-logo-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tienda-logo-file {
  position: relative; overflow: hidden; display: inline-flex; align-items: center;
  border: 1px dashed #c4503c; color: #8b3a2a; border-radius: 8px;
  padding: 11px 18px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.tienda-logo-file:hover { background: #faf6ec; }
.tienda-logo-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.tienda-logo-ver { font-size: 13px; font-weight: 700; color: #8b3a2a; text-decoration: none; }
.tienda-logo-ver:hover { text-decoration: underline; }

/* ============================================================
   MODERACIÓN DE IDENTIDAD VISUAL (admin)
   ============================================================ */
.mod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 30px;
}
.mod-card {
  display: flex; gap: 14px; align-items: center;
  background: #fffdf9; border: 1px solid #e5dccd; border-radius: 8px; padding: 14px;
}
.mod-img {
  width: 72px; height: 72px; flex: none; border-radius: 8px; overflow: hidden;
  background: #f4ecd9; border: 1px solid #eee5d2;
}
.mod-img.redonda { border-radius: 50%; }
.mod-img img { width: 100%; height: 100%; object-fit: cover; }
.mod-datos { min-width: 0; flex: 1; }
.mod-nombre { font: 500 16px Roboto, sans-serif; color: #0f0b09; }
.mod-meta { font-size: 12.5px; color: #8b8073; margin-top: 2px; }
.mod-acciones { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
.mod-ver { font-size: 12.5px; font-weight: 700; color: #8b3a2a; text-decoration: none; }

/* ============================================================
   AVATAR VISIBLE: confianza en la operación
   ============================================================ */

/* En el header, junto al nombre */
.hdr-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; border: 1px solid #d9cbb4; flex: none;
}

/* En la ficha: quién custodia la pieza */
.dpp-custodio {
  display: flex; align-items: center; gap: 14px;
  background: #fffdf9; border: 1px solid #e5dccd; border-radius: 8px;
  padding: 14px 16px; margin-top: 18px;
}
.dpp-custodio-foto {
  width: 52px; height: 52px; border-radius: 50%; flex: none; overflow: hidden;
  background: #f4ecd9; border: 1px solid #eee5d2;
  display: flex; align-items: center; justify-content: center;
}
.dpp-custodio-foto img { width: 100%; height: 100%; object-fit: cover; }
.dpp-custodio-foto .red-logo-inicial { font-size: 22px; }
.dpp-custodio-datos { min-width: 0; }
.dpp-custodio-rol {
  font-family: Roboto, sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: #8b8073;
}
.dpp-custodio-nombre { font: 500 16px Roboto, sans-serif; color: #0f0b09; margin-top: 2px; }
.dpp-custodio-meta { font-family: Roboto, sans-serif; font-size: 12.5px; color: #8b8073; margin-top: 3px; }
.dpp-custodio-meta a { color: #8b3a2a; font-weight: 700; text-decoration: none; }

/* Custodio anónimo: el dato existe, la identidad es ilegible */
.dpp-custodio.anonimo { background: #faf6ec; border-style: dashed; }
.dpp-custodio-foto .difuminada { filter: blur(7px) grayscale(.35); transform: scale(1.15); }
.dpp-custodio.anonimo .dpp-custodio-nombre { color: #8b8073; font-style: italic; }
.custodio-escudo { margin-left: auto; color: #6f8f5a; flex: none; }

/* Control de identidad pública en el perfil */
.identidad-control { margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid #eee5d2; }
.identidad-titulo { font-size: 13px; font-weight: 700; color: #5a4e44; margin-bottom: 10px; }
.identidad-opcion {
  display: flex; gap: 10px; align-items: flex-start;
  font-family: Roboto, sans-serif; font-size: 13.5px; line-height: 1.5;
  color: #473b31; padding: 9px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid transparent;
}
.identidad-opcion:hover { background: #faf6ec; }
.identidad-opcion input { margin-top: 3px; accent-color: #c4503c; flex: none; }
.identidad-opcion input:checked ~ span b { color: #8b3a2a; }
.identidad-opcion b { font-weight: 700; }

/* ============================================================
   RADAR — alta de búsqueda
   Antes solo se podía crear un radar desde el buscador, así que
   al entrar a "Mi radar" no había ninguna forma de agregar una.
   ============================================================ */

.radar-nueva {
  background: #fffdf9;
  border: 1px solid #e5dccd;
  border-radius: 10px;
  padding: 24px 26px 22px;
  margin: 4px 0 26px;
  max-width: 860px;
}
.radar-nueva-titulo {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 21px;
  color: #1a1208;
  margin: 0 0 6px;
}
.radar-nueva-bajada {
  font-size: 14px;
  line-height: 1.55;
  color: #6f665b;
  margin: 0 0 20px;
  max-width: 560px;
}
.radar-nueva-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.radar-campo { display: flex; flex-direction: column; gap: 6px; }
.radar-campo > span {
  font-family: Roboto, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #8b8073;
}
.radar-campo input,
.radar-campo select {
  font: 400 15px/1.2 Roboto, system-ui, sans-serif;
  color: #1a1208;
  background: #fff;
  border: 1px solid #ddd2c0;
  border-radius: 8px;
  padding: 12px 12px;
  width: 100%;
  box-sizing: border-box;
}
.radar-campo input:focus,
.radar-campo select:focus {
  outline: none;
  border-color: #c4503c;
  box-shadow: 0 0 0 3px rgba(196, 80, 60, .12);
}

.radar-nueva-pie {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.radar-nueva-btn {
  flex: 0 0 auto;
  width: auto;
  padding: 0 26px;
  white-space: nowrap;
}
.radar-nueva-regla {
  flex: 1 1 320px;
  font-size: 13px;
  line-height: 1.5;
  color: #8b8073;
  margin: 0;
  padding-left: 14px;
  border-left: 3px solid #e5dccd;
  transition: color .2s, border-color .2s;
}
/* Se enciende en el momento exacto en que la búsqueda pasa a ser quirúrgica */
.radar-nueva-regla.quirurgica {
  color: #2f6b4a;
  border-left-color: #2f6b4a;
}

@media (max-width: 760px) {
  .radar-nueva { padding: 20px 16px; }
  .radar-nueva-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
  .radar-nueva-grid { grid-template-columns: 1fr; }
  .radar-nueva-btn { width: 100%; }
}

/* Tienda todavía sin piezas: no es un error, es que recién arranca */
.red-sin-piezas { color: #a1968a; }

/* ============================================================
   SELECCIÓN DE POSTS (previa a la importación)
   Lo que se ve acá NO está en el archivo. Es el paso donde se
   decide qué es una pieza y qué es promo.
   ============================================================ */

.ig-vacio {
  background: #fffdf9; border: 1px solid #e5dccd; border-radius: 10px;
  padding: 26px; max-width: 640px; color: #6f665b; font-size: 14.5px; line-height: 1.6;
}
.ig-vacio code { background: #f2ece1; padding: 2px 6px; border-radius: 4px; font-size: 13px; }

/* Cuentas */
.ig-cuentas { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 20px; }
.ig-cuenta {
  display: flex; flex-direction: column; gap: 3px;
  background: #fffdf9; border: 1px solid #e5dccd; border-radius: 9px;
  padding: 12px 16px; text-decoration: none; min-width: 190px;
  transition: border-color .15s, background .15s;
}
.ig-cuenta:hover { border-color: #c9bda8; }
.ig-cuenta.activa { border-color: #c4503c; background: #fff8f4; }
.ig-cuenta-nombre { font-weight: 700; font-size: 14.5px; color: #1a1208; }
.ig-cuenta-org { font-size: 12px; color: #8b8073; }
.ig-cuenta-nums { font-size: 12px; color: #6f665b; margin-top: 3px; }
.ig-cuenta-nums b { color: #c4503c; }

/* Barra de filtros */
.ig-barra {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
  border-bottom: 1px solid #e5dccd; padding-bottom: 12px;
}
.ig-filtros { display: flex; gap: 6px; flex-wrap: wrap; }
.ig-filtro {
  font-size: 13px; padding: 7px 13px; border-radius: 7px;
  text-decoration: none; color: #6f665b; border: 1px solid transparent;
}
.ig-filtro:hover { background: #f2ece1; }
.ig-filtro.activo { background: #1a1208; color: #f7f3ed; }

/* Acciones, pegadas arriba mientras se revisa */
.ig-acciones-fijas {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: #fffdf9; border: 1px solid #e5dccd; border-radius: 9px;
  padding: 12px 16px; margin-bottom: 18px;
  box-shadow: 0 2px 10px rgba(26,18,8,.05);
}
.ig-todos { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #5a4e44; cursor: pointer; }
.ig-contador { font-size: 13px; color: #8b8073; margin-right: auto; }
/* Los botones solo se encienden cuando hay algo seleccionado */
.ig-acciones-fijas button { opacity: .4; pointer-events: none; transition: opacity .15s; }
.con-seleccion .ig-acciones-fijas button { opacity: 1; pointer-events: auto; }
.ig-btn-si { width: auto; padding: 0 20px; height: 38px; font-size: 13.5px; }
.ig-btn-no { color: #a33; }

/* Grilla */
.ig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.ig-card {
  display: flex; flex-direction: column;
  background: #fffdf9; border: 1px solid #e5dccd; border-radius: 10px;
  overflow: hidden; cursor: pointer; position: relative;
  transition: border-color .15s, box-shadow .15s;
}
.ig-card:hover { border-color: #c9bda8; box-shadow: 0 3px 12px rgba(26,18,8,.07); }
.ig-card:has(.ig-check:checked) { border-color: #c4503c; box-shadow: 0 0 0 2px rgba(196,80,60,.16); }
.ig-card.estado-descartado { opacity: .55; }
.ig-card.estado-promovido  { opacity: .7; cursor: default; }

.ig-check { position: absolute; top: 10px; left: 10px; z-index: 3; width: 19px; height: 19px; cursor: pointer; }

.ig-foto { position: relative; aspect-ratio: 1; background: #ece4d6; }
.ig-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-sinfoto {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: #a1968a; font-size: 12px; letter-spacing: .1em;
}
.ig-nfotos {
  position: absolute; top: 9px; right: 9px;
  background: rgba(26,18,8,.72); color: #fff; font-size: 11px;
  padding: 3px 8px; border-radius: 20px;
}
.ig-conf {
  position: absolute; bottom: 9px; right: 9px;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
  padding: 3px 8px; border-radius: 20px; color: #fff;
}
.ig-conf.conf-alta  { background: #2f6b4a; }
.ig-conf.conf-media { background: #b8860b; }
.ig-conf.conf-baja  { background: #8b8073; }

.ig-datos { padding: 12px 14px 11px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.ig-sug { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 14px; color: #1a1208; }
.ig-sin-lectura { color: #a1968a; font-weight: 400; font-style: italic; }
.ig-anio { font-size: 12.5px; color: #8b8073; }
.ig-estado-pieza { font-size: 11px; padding: 2px 7px; border-radius: 4px; text-transform: uppercase; letter-spacing: .05em; }
.ig-estado-pieza.est-disponible { background: #e6f0e9; color: #2f6b4a; }
.ig-estado-pieza.est-vendida    { background: #f6e4e1; color: #a33; }
.ig-estado-pieza.est-reservada  { background: #f5eeda; color: #8a6d1f; }

.ig-caption-caja { position: relative; flex: 1; }
.ig-caption {
  font-size: 12.5px; line-height: 1.55; color: #6f665b; margin: 0;
  white-space: pre-line; word-break: break-word;
}
/* Recortado por defecto, pero se abre entero: el año, el país y el
   estuche original suelen estar al final del caption. */
.ig-caption-caja.recortada .ig-caption {
  max-height: 5.4em; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 60%, transparent);
          mask-image: linear-gradient(#000 60%, transparent);
}
.ig-ver-mas {
  background: none; border: 0; padding: 2px 0 0; cursor: pointer;
  font: 600 11.5px/1 Roboto, sans-serif; color: #c4503c;
}
.ig-ver-mas:hover { text-decoration: underline; }

.ig-pie { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 11.5px; }
.ig-alerta   { color: #b8860b; background: #fdf6e3; padding: 2px 7px; border-radius: 4px; }
.ig-marca-si { color: #2f6b4a; font-weight: 600; }
.ig-marca-no { color: #a33; }
.ig-marca-ok { color: #8b8073; }
.ig-link { color: #8b8073; text-decoration: underline; margin-left: auto; }
.ig-link:hover { color: #c4503c; }

@media (max-width: 560px) {
  .ig-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ig-datos { padding: 9px 10px; }
  .ig-caption { display: none; }
}

/* Las tarjetas son datos densos, no prosa: van en sans */
.ig-card, .ig-card * { font-family: Roboto, system-ui, -apple-system, sans-serif; }
.ig-sug b { font-weight: 700; }

/* ============================================================
   TRAER CATÁLOGO (subida del JSON del extractor)
   ============================================================ */

.ig-error {
  background: #fdf0ed; border-left: 3px solid #c4503c; color: #8a3325;
  padding: 13px 16px; border-radius: 0 8px 8px 0; margin-bottom: 20px;
  font-size: 14px; max-width: 720px;
}
.ig-resultado {
  background: #f0f6f2; border: 1px solid #cfe0d5; border-radius: 10px;
  padding: 22px 24px; margin-bottom: 26px; max-width: 720px;
}
.ig-resultado h2 { font-family: Georgia, serif; font-size: 20px; color: #1a1208; margin: 0 0 14px; }
.ig-nums { display: flex; gap: 26px; flex-wrap: wrap; }
.ig-nums > div { display: flex; flex-direction: column; }
.ig-nums b { font-size: 26px; color: #2f6b4a; line-height: 1.1; }
.ig-nums span { font-size: 12px; color: #6f665b; }
.ig-nums .mal b { color: #a33; }
.ig-ojo { font-size: 13px; color: #8a6d1f; background: #fdf6e3; padding: 9px 12px;
          border-radius: 6px; margin: 14px 0 0; }

.ig-paso {
  display: flex; gap: 18px; align-items: flex-start;
  background: #fffdf9; border: 1px solid #e5dccd; border-radius: 10px;
  padding: 22px 24px; margin-bottom: 14px; max-width: 860px;
}
.ig-paso-num {
  flex: 0 0 34px; height: 34px; border-radius: 50%;
  background: #1a1208; color: #f7f3ed;
  display: flex; align-items: center; justify-content: center;
  font: 700 15px/1 Roboto, sans-serif;
}
.ig-paso-cuerpo { flex: 1; min-width: 0; }
.ig-paso h2 { font-family: Georgia, serif; font-size: 18px; color: #1a1208; margin: 4px 0 8px; }
.ig-paso p { font-size: 14px; line-height: 1.6; color: #6f665b; margin: 0 0 12px; }
.ig-paso code { background: #f2ece1; padding: 2px 6px; border-radius: 4px; font-size: 12.5px; }
.ig-nota { font-size: 13px !important; color: #8b8073 !important; }

.ig-codigo {
  background: #1a1208; color: #e8dcc8; border-radius: 8px;
  padding: 14px 16px; overflow-x: auto; margin: 0 0 12px;
  font: 400 12.5px/1.7 ui-monospace, Menlo, Consolas, monospace;
}
.ig-codigo code { background: none; padding: 0; color: inherit; font-size: inherit; }

.ig-cuentas-links { display: flex; gap: 8px; flex-wrap: wrap; }
.ig-cuentas-links a {
  display: flex; flex-direction: column; gap: 1px;
  border: 1px solid #e5dccd; border-radius: 8px; padding: 9px 13px;
  text-decoration: none; color: #c4503c; font-size: 13.5px; font-weight: 600;
}
.ig-cuentas-links a:hover { border-color: #c4503c; background: #fff8f4; }
.ig-cuentas-links a span { color: #8b8073; font-size: 11.5px; font-weight: 400; }

.ig-subida { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.ig-subida input[type=file] { font-size: 13.5px; color: #5a4e44; }
.ig-subida button { width: auto; padding: 0 22px; height: 42px; }

.ig-detalle summary { cursor: pointer; font-size: 13.5px; color: #8b8073; }
.ig-detalle summary:hover { color: #c4503c; }
.ig-detalle p { font-size: 13.5px; color: #6f665b; margin: 10px 0; }

@media (max-width: 620px) {
  .ig-paso { flex-direction: column; gap: 10px; padding: 18px 16px; }
}

/* Las URLs firmadas caducan: no es un detalle, es una fecha de vencimiento */
.ig-caduca {
  font-size: 13px !important; line-height: 1.55;
  background: #fdf6e3; border-left: 3px solid #b8860b;
  color: #7a6220 !important; padding: 10px 13px; border-radius: 0 6px 6px 0;
}

/* ============================================================
   TRAER CATÁLOGOS
   ============================================================ */

.traer-lista { display: flex; flex-direction: column; gap: 8px; margin: 20px 0; max-width: 900px; }
.traer-fila {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: #fffdf9; border: 1px solid #e5dccd; border-radius: 9px;
  padding: 15px 18px;
}
.traer-fila:hover { border-color: #c9bda8; }
.traer-quien { flex: 1 1 240px; min-width: 0; }
.traer-nombre { font-family: Georgia, serif; font-size: 17px; color: #1a1208; }
.traer-ig { font-size: 12.5px; color: #8b8073; margin-top: 2px; }
.traer-estado { flex: 0 0 190px; font-size: 13px; color: #6f665b; }
.traer-estado b { color: #2f6b4a; }
.traer-estado a { color: #c4503c; }
.traer-fecha { font-size: 11.5px; color: #a1968a; }
.traer-nunca { color: #a1968a; font-style: italic; }
.traer-botones { display: flex; gap: 8px; }
.traer-botones .dpp-btn-primary { width: auto; padding: 0 18px; height: 38px; font-size: 13px; }

.traer-consola {
  background: #1a1208; border-radius: 10px; overflow: hidden;
  margin-top: 20px; max-width: 900px;
}
.traer-consola-barra {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px; background: #241a0e; color: #e8dcc8; font-size: 13px;
}
.traer-consola-barra button {
  background: none; border: 1px solid #4a3c2a; color: #c9bda8;
  padding: 4px 12px; border-radius: 5px; cursor: pointer; font-size: 12px;
}
.traer-consola-barra button:hover { border-color: #c4503c; color: #e8a48f; }
.traer-consola pre {
  margin: 0; padding: 16px; max-height: 420px; overflow: auto;
  color: #d8ccb8; font: 400 12.5px/1.65 ui-monospace, Menlo, Consolas, monospace;
  white-space: pre-wrap; word-break: break-word;
}

@media (max-width: 640px) {
  .traer-fila { flex-direction: column; align-items: stretch; gap: 10px; }
  .traer-estado { flex: none; }
  .traer-botones .dpp-btn-primary { flex: 1; }
}

/* Promoción: el momento en que nace el DPP */
.ig-barra-acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ig-btn-promover { width: auto; padding: 0 20px; height: 38px; font-size: 13.5px; }

.prom-resultado {
  background: #f0f6f2; border: 1px solid #cfe0d5; border-radius: 10px;
  padding: 22px 24px; margin-bottom: 24px; max-width: 780px;
}
.prom-resultado h2 { font-family: Georgia, serif; font-size: 21px; color: #1a1208; margin: 0 0 8px; }
.prom-resultado p { font-size: 14px; line-height: 1.6; color: #4a5f52; margin: 0 0 6px; }

.prom-cuentas {
  margin-top: 18px; background: #fffdf9; border: 1px solid #e5dccd;
  border-radius: 8px; padding: 16px 18px;
}
.prom-cuentas h3 { font-family: Georgia, serif; font-size: 16px; color: #1a1208; margin: 0 0 8px; }
.prom-ojo {
  font-size: 13px !important; color: #7a6220 !important;
  background: #fdf6e3; border-left: 3px solid #b8860b;
  padding: 9px 12px; border-radius: 0 6px 6px 0; margin: 0 0 12px !important;
}
.prom-tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.prom-tabla th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: #8b8073; font-weight: 600; padding: 6px 10px 6px 0; border-bottom: 1px solid #e5dccd;
}
.prom-tabla td { padding: 9px 10px 9px 0; border-bottom: 1px solid #f2ece1; color: #1a1208; }
.prom-tabla code { background: #f2ece1; padding: 3px 7px; border-radius: 4px; font-size: 12.5px; }
.prom-clave { background: #1a1208 !important; color: #e8dcc8 !important; letter-spacing: .04em; }
.prom-nota { font-size: 12.5px !important; color: #8b8073 !important; margin-top: 10px !important; }

/* ============================================================
   PONER CLAVE PROPIA
   Pantalla sin salida hasta que la cuenta tenga su propia clave.
   ============================================================ */

.clave-caja {
  max-width: 420px; margin: 0 auto;
  background: #fffdf9; border: 1px solid #e5dccd; border-radius: 12px;
  padding: 34px 32px 30px;
}
/* Esta pantalla no carga el header, así que la marca se pinta acá */
.clave-marca { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; text-decoration: none; }
.clave-marca .brand-main { color: #1a1208; font-size: 22px; letter-spacing: .16em; }
.clave-marca .brand-seal { background: #1a1208; color: #d9a441; }
.clave-titulo { font-family: Georgia, serif; font-size: 26px; color: #1a1208; margin: 0 0 10px; }
.clave-bajada { font-size: 14px; line-height: 1.6; color: #6f665b; margin: 0 0 18px; }
.clave-quien {
  font-size: 12.5px; color: #8b8073; padding-bottom: 16px;
  border-bottom: 1px solid #f2ece1; margin: 0 0 18px;
}
.clave-error {
  background: #fdf0ed; border-left: 3px solid #c4503c; color: #8a3325;
  padding: 11px 14px; border-radius: 0 6px 6px 0; margin-bottom: 16px; font-size: 13.5px;
}
.clave-form { display: flex; flex-direction: column; gap: 14px; }
.clave-campo { display: flex; flex-direction: column; gap: 6px; }
.clave-campo > span {
  font: 600 11px/1 Roboto, sans-serif; letter-spacing: .07em;
  text-transform: uppercase; color: #8b8073;
}
.clave-campo input {
  font: 400 15px/1.2 Roboto, sans-serif; color: #1a1208; background: #fff;
  border: 1px solid #ddd2c0; border-radius: 8px; padding: 12px; width: 100%;
  box-sizing: border-box;
}
.clave-campo input:focus {
  outline: none; border-color: #c4503c; box-shadow: 0 0 0 3px rgba(196,80,60,.12);
}
.clave-campo small { font-size: 11.5px; color: #a1968a; }
.clave-boton { width: 100%; margin-top: 6px; }
.clave-salida { text-align: center; margin: 18px 0 0; font-size: 13px; }
.clave-salida a { color: #8b8073; }
.clave-salida a:hover { color: #c4503c; }

/* Separador del bloque admin dentro del menú de cuenta */
.hdr-menu-seccion {
  font: 600 10px/1 Roboto, sans-serif; letter-spacing: .12em; text-transform: uppercase;
  color: #a1968a; padding: 12px 16px 6px; margin-top: 4px; border-top: 1px solid #efe7d9;
}
/* Cuántos posts esperan decisión */
.hdr-pendientes {
  display: inline-block; background: #c4503c; color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 1;
  padding: 3px 6px; border-radius: 20px; margin-left: 4px; vertical-align: 1px;
}

.traer-cuenta { flex: 0 0 120px; }
.traer-tiene-cuenta {
  font-size: 12px; color: #2f6b4a; background: #e6f0e9;
  padding: 4px 10px; border-radius: 20px;
}
@media (max-width: 640px) { .traer-cuenta { flex: none; } }

/* Qué estoy viendo y qué no: la pantalla arranca filtrada */
.ig-que-veo {
  font-size: 13.5px; color: #6f665b; margin: 0 0 14px;
  background: #fffdf9; border: 1px solid #e5dccd; border-left: 3px solid #c4503c;
  border-radius: 0 8px 8px 0; padding: 10px 14px;
}
.ig-que-veo b { color: #1a1208; }
.ig-que-veo a { color: #c4503c; }

/* Cómo va: se puede mirar sin depender de la pestaña que lanzó la traída */
.avance-caja {
  background: #fffdf9; border: 1px solid #e5dccd; border-radius: 10px;
  padding: 20px 24px; margin-bottom: 24px; max-width: 620px;
}
.avance-estado { font-size: 14px; color: #8b8073; margin-bottom: 16px; }
.avance-estado.vivo { color: #2f6b4a; font-weight: 600; }
.avance-punto {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: #2f6b4a; margin-right: 6px; animation: avance-late 1.4s infinite;
}
@keyframes avance-late { 0%,100% { opacity: 1 } 50% { opacity: .25 } }
.avance-nums { display: flex; gap: 34px; flex-wrap: wrap; }
.avance-nums > div { display: flex; flex-direction: column; }
.avance-nums b { font-size: 28px; color: #1a1208; line-height: 1.1; }
.avance-nums span { font-size: 12px; color: #8b8073; }
.avance-nota { font-size: 12.5px; color: #8b8073; margin: 16px 0 0; }

.avance-de { font-size: 15px; color: #a1968a; font-weight: 400; }
.avance-barra {
  height: 8px; background: #ece4d6; border-radius: 20px;
  overflow: hidden; margin: 16px 0 8px; max-width: 420px;
}
.avance-barra span {
  display: block; height: 100%; background: #2f6b4a;
  border-radius: 20px; transition: width .4s;
}

.avance-hace { color: #a1968a; font-weight: 400; font-size: 13px; }

/* Si el filtro es justamente el de las decididas, se muestran enteras */
.ig-grid.sin-atenuar .ig-card { opacity: 1; }

/* ============================================================
   GRILLA COMPACTA + CARRUSEL AL PASAR EL MOUSE
   Con miles de publicaciones para mirar, lo que importa es cuántas
   entran en pantalla y poder ver las otras fotos sin hacer un click.
   ============================================================ */

.ig-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 11px; }
.ig-card { border-radius: 8px; }
.ig-check { top: 7px; left: 7px; width: 17px; height: 17px; }
.ig-datos { padding: 8px 10px 8px; gap: 5px; }
.ig-sug { font-size: 12.5px; gap: 6px; }
.ig-anio { font-size: 11.5px; }
.ig-estado-pieza { font-size: 9.5px; padding: 1px 5px; }
.ig-caption { font-size: 11.5px; line-height: 1.45; }
.ig-caption-caja.recortada .ig-caption { max-height: 4.4em; }
.ig-pie { font-size: 10.5px; gap: 6px; }
.ig-ver-mas { font-size: 10.5px; }

/* La confianza pasa a ser una sola letra: A, M o B */
.ig-conf {
  bottom: 6px; right: 6px; width: 17px; height: 17px; padding: 0;
  border-radius: 50%; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  text-transform: uppercase; letter-spacing: 0;
}
.ig-nfotos { top: 6px; right: 6px; font-size: 10px; padding: 2px 6px; }

/* Barritas tipo historias: en cuál de las fotos estoy */
.ig-barritas {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; gap: 2px; padding: 5px 6px; z-index: 2;
  opacity: 0; transition: opacity .15s;
  background: linear-gradient(rgba(0,0,0,.35), transparent);
}
.ig-foto.con-carrusel:hover .ig-barritas { opacity: 1; }
.ig-barritas span {
  flex: 1; height: 2px; border-radius: 2px; background: rgba(255,255,255,.4);
}
.ig-barritas span.activa { background: #fff; }
.ig-foto.con-carrusel { cursor: ew-resize; }

@media (max-width: 560px) {
  .ig-grid { grid-template-columns: 1fr 1fr; }
}

/* Lo que ve la tienda en su propia pantalla de selección */
.ig-ojo-tienda {
  background: #fdf6e3; border-left: 3px solid #b8860b;
  padding: 11px 14px; border-radius: 0 8px 8px 0;
  font-size: 13.5px !important; color: #7a6220 !important;
}
.ig-esperando {
  font-size: 13px; color: #2f6b4a; background: #e6f0e9;
  padding: 7px 13px; border-radius: 20px;
}

/* No es un estado que PULPA sostenga: es lo que decía el post */
.ig-decia {
  font-size: 10px; color: #8b8073; background: #f2ece1;
  padding: 2px 6px; border-radius: 4px; font-style: italic;
}

/* Fecha de la publicación: la referencia más útil para ubicarse */
.ig-fecha { color: #8b8073; }

/* Cartel de contexto: qué estoy viendo y en qué orden */
.ig-que-veo {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
}
.ig-orden { display: flex; gap: 4px; flex-wrap: wrap; }
.ig-orden a {
  font-size: 12px; color: #8b8073; text-decoration: none;
  padding: 4px 9px; border-radius: 6px; border: 1px solid transparent;
}
.ig-orden a:hover { background: #f2ece1; }
.ig-orden a.activo { color: #1a1208; border-color: #ddd2c0; background: #fff; }

/* Paginado: sin esto, con 2.198 publicaciones solo se veían las primeras */
.ig-paginado {
  display: flex; align-items: center; justify-content: center;
  gap: 20px; margin: 26px 0 6px; font-size: 14px; color: #8b8073;
}
.ig-paginado a {
  color: #c4503c; text-decoration: none; font-weight: 600;
  padding: 9px 18px; border: 1px solid #e5dccd; border-radius: 8px;
  background: #fffdf9;
}
.ig-paginado a:hover { border-color: #c4503c; }

/* ============================================================
   RESPALDO DE UN EVENTO DEL HISTORIAL
   Fotos del trabajo, el informe del luthier, radiografías, la
   factura del service. Un sello sin esto es una afirmación suelta.
   ============================================================ */

.dpp-evento-quien {
  font-size: 12.5px; color: #8b8073; margin-top: 4px;
}
.dpp-evento-quien b { color: #5a4e44; }

.dpp-evento-respaldo {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px;
}
.dpp-adj-foto {
  width: 78px; height: 78px; border-radius: 7px; overflow: hidden;
  border: 1px solid #e5dccd; display: block; background: #f2ece1;
  transition: border-color .15s, transform .15s;
}
.dpp-adj-foto:hover { border-color: #c4503c; transform: translateY(-2px); }
.dpp-adj-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dpp-adj-doc {
  display: inline-flex; align-items: center; gap: 7px;
  font: 500 12.5px/1 Roboto, sans-serif; color: #5a4e44;
  background: #fffdf9; border: 1px solid #e5dccd; border-radius: 7px;
  padding: 10px 13px; text-decoration: none; max-width: 240px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dpp-adj-doc:hover { border-color: #c4503c; color: #c4503c; }

/* En el editor */
.ev-a-adjuntos { grid-column: 1 / -1; }
.ev-a-adjuntos input[type=file] { font-size: 13px; color: #5a4e44; }
.ev-a-adjuntos small { display: block; font-size: 12px; color: #8b8073; margin-top: 5px; line-height: 1.5; }
.ev-adjuntos-lista { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
.ev-adjunto {
  width: 54px; height: 54px; border-radius: 6px; border: 1px solid #ddd2c0;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: #f2ece1; color: #8b8073; font: 700 10px/1 Roboto, sans-serif;
  text-decoration: none;
}
.ev-adjunto img { width: 100%; height: 100%; object-fit: cover; }
.ev-adjunto:hover { border-color: #c4503c; }

/* ============================================================
   PEDIR VERIFICACIÓN
   ============================================================ */

.verif-grid {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px;
  margin-top: 22px; max-width: 900px; align-items: start;
}
.verif-h2 {
  font-family: Georgia, 'Times New Roman', serif; font-size: 19px;
  color: #1a1208; margin: 0 0 12px;
}
.verif-lista { list-style: none; padding: 0; margin: 0 0 26px; }
.verif-lista li {
  font-size: 14px; line-height: 1.6; color: #6f665b;
  padding: 0 0 12px 22px; position: relative;
}
.verif-lista li::before {
  content: ''; position: absolute; left: 4px; top: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: #c4503c;
}
.verif-lista b { color: #1a1208; }

.verif-limite {
  font-size: 13.5px; line-height: 1.6; color: #7a6220;
  background: #fdf6e3; border-left: 3px solid #b8860b;
  padding: 13px 16px; border-radius: 0 8px 8px 0;
}

.verif-precio-caja {
  background: #1a1208; color: #f7f3ed; border-radius: 10px;
  padding: 22px 24px; margin-bottom: 18px;
}
.verif-precio { font: 700 30px/1 Roboto, sans-serif; letter-spacing: -.01em; }
.verif-precio-sub { font-size: 13px; color: #c9bda8; margin-top: 8px; line-height: 1.5; }

.verif-form { display: flex; flex-direction: column; gap: 14px; }
.verif-btn { width: auto; padding: 0 24px; height: 46px; }
.verif-nota { font-size: 12.5px; color: #8b8073; margin: 0; }
.verif-ya {
  background: #f0f6f2; border: 1px solid #cfe0d5; border-radius: 9px;
  padding: 14px 16px; font-size: 13.5px; color: #4a5f52;
}

.verif-hecho {
  background: #f0f6f2; border: 1px solid #cfe0d5; border-radius: 10px;
  padding: 26px 28px; max-width: 620px;
}
.verif-hecho h2 { font-family: Georgia, serif; font-size: 22px; color: #1a1208; margin: 0 0 10px; }
.verif-hecho p { font-size: 14px; line-height: 1.6; color: #4a5f52; margin: 0 0 16px; }
.verif-volver { display: inline-block; margin-top: 18px; font-size: 13.5px; color: #8b8073; }

.verif-red { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.verif-quien {
  background: #fffdf9; border: 1px solid #e5dccd; border-radius: 9px; padding: 13px 16px;
}
.verif-quien-nombre { font-family: Georgia, serif; font-size: 15px; color: #1a1208; }
.verif-quien-tipo { font-size: 12px; color: #8b8073; margin-top: 3px; }

@media (max-width: 760px) {
  .verif-grid { grid-template-columns: 1fr; gap: 22px; }
}

/* ============================================================
   COLA DE VERIFICACIONES (admin) Y LADO DEL PROFESIONAL
   ============================================================ */

.verif-cola { display: flex; flex-direction: column; gap: 12px; max-width: 860px; }
.verif-pedido {
  background: #fffdf9; border: 1px solid #e5dccd; border-radius: 10px;
  padding: 18px 20px; border-left: 3px solid #ddd2c0;
}
.verif-pedido.estado-solicitada { border-left-color: #c4503c; }
.verif-pedido.estado-coordinada { border-left-color: #b8860b; }
.verif-pedido.estado-completada { border-left-color: #2f6b4a; opacity: .82; }
.verif-pedido.estado-cancelada  { opacity: .5; }

.verif-pedido-cab {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px; margin-bottom: 10px;
}
.verif-pedido-pieza {
  font-family: Georgia, serif; font-size: 17px; color: #1a1208; text-decoration: none;
}
.verif-pedido-pieza:hover { color: #c4503c; }
.verif-pedido-meta { font-size: 12.5px; color: #8b8073; margin-top: 3px; }

.verif-estado {
  font-size: 11px; padding: 4px 10px; border-radius: 20px; white-space: nowrap;
  background: #f2ece1; color: #6f665b;
}
.verif-estado.est-solicitada { background: #fdf0ed; color: #a33; }
.verif-estado.est-coordinada { background: #fdf6e3; color: #8a6d1f; }
.verif-estado.est-completada { background: #e6f0e9; color: #2f6b4a; }

.verif-pedido-quien, .verif-pedido-nota, .verif-pedido-asignado, .verif-informe-hecho {
  font-size: 13px; color: #6f665b; margin-top: 6px; line-height: 1.5;
}
.verif-pedido-nota {
  background: #fdf6e3; padding: 9px 12px; border-radius: 6px; color: #7a6220;
}
.verif-pedido-asignado, .verif-informe-hecho {
  border-top: 1px solid #f2ece1; padding-top: 10px; margin-top: 12px;
}

.verif-pedido-acciones {
  display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid #f2ece1;
}
.verif-asignar { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.verif-asignar .radar-campo { min-width: 190px; }
.verif-costo { max-width: 130px; }
.verif-pago-si { color: #2f6b4a; border-color: #2f6b4a; }

.verif-informe-form {
  display: flex; flex-direction: column; gap: 14px;
  margin-top: 14px; padding-top: 16px; border-top: 1px solid #f2ece1;
}
.verif-informe-form textarea {
  font: 400 14px/1.6 Roboto, system-ui, sans-serif; color: #1a1208;
  background: #fff; border: 1px solid #ddd2c0; border-radius: 8px;
  padding: 12px; width: 100%; box-sizing: border-box; resize: vertical;
}
.verif-informe-form textarea:focus {
  outline: none; border-color: #c4503c; box-shadow: 0 0 0 3px rgba(196,80,60,.12);
}
.verif-informe-form small { font-size: 12px; color: #8b8073; line-height: 1.5; }

/* ── El histórico del modelo ─────────────────────────────────
   Debajo de la ficha técnica y con su propio aire. Probamos meterlo al
   costado de la tabla y le comía el ancho: "Stratocaster American
   Standard" salía partido en tres renglones. Y en la columna del precio
   competía con el precio de la pieza. Acá no molesta a nadie. */
.mkt {
  /* El gráfico pasa a ocupar el ancho entero y la explicación va debajo:
     apretado en 340px no se leía la escala ni la franja (2026-08-07). */
  display: block;
  margin-top: 26px;
}
.mkt-graf { min-width: 0; }
.mkt-tit {
  margin: 0 0 2px;
  font: 700 10.5px/1 -apple-system, system-ui, sans-serif;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-soft, #8b8073);
}
.mkt-pie {
  margin: 8px 0 8px;
  font-size: 11.5px; line-height: 1.6; color: #a1968a;
  max-width: 78ch;
}

@media (max-width: 760px) {
  .mkt { grid-template-columns: 1fr; gap: 8px; align-items: start; }
  .mkt-pie { max-width: none; }
}

/* ── El título va primero en la columna derecha ──────────────
   Antes arrancaba con las migas y un aviso, y el nombre del
   instrumento aparecía cuarto. Lo primero que uno busca al entrar es
   qué es la pieza; el resto es contexto y va después. */
.dpp-info > .dpp-title-row:first-child { margin-top: 0; }
.dpp-info .dpp-meta-line { margin-top: 8px; }
.dpp-info .dpp-breadcrumb { margin-top: 10px; }

/* PULPA · ahora que la fuente es IG (todas 4:5), la ficha 4:5 llena exacto: sin recorte, sin relleno */
.dpp-sim-foto { aspect-ratio: 4 / 5 !important; }
.dpp-sim-foto img { object-position: center bottom !important; }

/* PULPA · foto principal del DPP en 4:5 (vertical, igual que la ficha y la foto IG), base abajo */
.dpp-media-card .dpp-photo-main, #dpp-photo-zoomable {
  aspect-ratio: 4 / 5 !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden;
}
.dpp-media-card .dpp-photo-main img, #dpp-photo-zoomable img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center bottom !important;
}

/* PULPA · DPP: mostrar la foto COMPLETA (sobreescribe el 4:5 del DPP de antes).
   En la ficha/card se sigue usando 4:5; acá, en el detalle, se ve entera. */
.dpp-media-card .dpp-photo-main, #dpp-photo-zoomable {
  aspect-ratio: auto !important;
  height: auto !important;
  max-height: none !important;
}
.dpp-media-card .dpp-photo-main img, #dpp-photo-zoomable img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* PULPA · miniaturas: alto = alto de la foto main (lo fija el JS), con scroll vertical */
.dpp-media-card { align-items: flex-start !important; }
.dpp-media-card .dpp-thumbs { overflow-y: auto !important; overflow-x: hidden !important; }

/* PULPA · amplis/audio: entran de ANCHO (contain), no se recortan los lados ni
   arriba/abajo; el aire queda como fondo neutro. Solo para .foto-ancho. */
.dpp-sim-foto.foto-ancho { background: #e9e6e1; }
.dpp-sim-foto.foto-ancho img { object-fit: contain !important; object-position: center !important; }

/* PULPA · descripción arriba del DPP: teaser ~6 líneas, expandible, font más chico */
.dpp-desc-top { margin: 30px 0 34px; }
.dpp-desc-top-txt { font: 16px/1.62 Georgia, serif; color: var(--ink); }
.dpp-desc-top-txt p { margin: 0 0 9px; }
.dpp-desc-top-txt p:last-child { margin-bottom: 0; }
.dpp-desc-top-txt:not(.abierto) { max-height: 9.7em; overflow: hidden; }
.dpp-desc-top-mas {
  background: none; border: 0; color: #8b3a2a; font-weight: 700;
  cursor: pointer; padding: 7px 0 0; font-size: 13px;
}
.dpp-desc-top-mas:hover { text-decoration: underline; }

/* PULPA · columna izquierda del DPP: títulos de sección unificados (línea dorada
   + mayúsculas, como "La pieza") y ritmo de espacios parejo. */
.dpp-ficha-titulo, .mkt-tit {
  display: flex; align-items: center; gap: 12px;
  text-transform: uppercase; letter-spacing: .09em;
  font-size: 19px; font-weight: 700;
  font-family: Roboto, sans-serif; color: #0f0b09;
  margin: 0 0 16px;
}
.dpp-ficha-titulo::before, .mkt-tit::before {
  content: ""; width: 26px; height: 1px; background: var(--gold-deep); flex: none;
}
.dpp-ficha-bajo-foto { margin: 34px 0; }
.mkt { margin: 34px 0 8px; }

/* ============================================================
   Títulos de sección del DPP FLUSH-LEFT (pedido de Andrés):
   se saca la rayita/línea previa que corría el texto ~38px a la
   derecha (x=117). Ahora el texto arranca en el borde del
   contenido (x=79), alineado con el cuerpo y la foto.
   ============================================================ */
.dpp-section-title::before,
.dpp-ficha-titulo::before { content: none !important; display: none !important; }
.dpp-section-title,
.dpp-ficha-titulo { gap: 0 !important; }

/* Título colgado: los títulos de sección salen al borde de la caja
   (28px a la izq del cuerpo), quedando "más a la izquierda". */
.dpp-section-title,
.dpp-ficha-titulo { margin-left: -28px !important; }

/* ============================================================
   MÓVIL · Galería de fotos gestual (pedido de Andrés):
   - sin flechas prev/next (se cambia con swipe)
   - touch-action pan-y: permite scroll vertical; el swipe
     horizontal y el paneo con zoom los maneja el JS.
   ============================================================ */
@media (max-width: 779px){
  .dpp-nav { display: none !important; }
}
/* pan-y deja pasar el scroll vertical y nos deja tomar el horizontal
   —para cambiar de foto— y también el pellizco, que lo maneja el
   carrusel: es lo que permite cargar la versión en alta al ampliar, que
   el zoom del navegador no sabe hacer. */
.dpp-photo-main { touch-action: pan-y; }
.dpp-photo-main.zoomeada { touch-action: none; }

/* ============================================================
   CARRUSEL DPP · puntitos indicadores + slide animado
   (reemplaza las flechas: móvil solo puntitos, desktop miniaturas + puntitos)
   ============================================================ */
.dpp-media-card .dpp-photo-main { overflow: hidden; }
#dpp-main-img { will-change: transform; }

/* imagen saliente durante la animación de deslizamiento */
.dpp-ghost {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  object-fit: contain !important; object-position: center !important;
  z-index: 2; pointer-events: none; background: inherit; will-change: transform;
}

/* puntitos, centrados abajo de la foto */
.dpp-dots {
  position: absolute; left: 0; right: 0; bottom: 12px; z-index: 6;
  display: flex; justify-content: center; align-items: center; gap: 7px;
  pointer-events: none;
}
.dpp-dots .dpp-dot {
  pointer-events: auto;
  width: 7px; height: 7px; padding: 0; border: 0;
  border-radius: 999px; background: rgba(255,255,255,.6);
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
  cursor: pointer; transition: width .25s ease, background .25s ease;
}
.dpp-dots .dpp-dot:hover { background: rgba(255,255,255,.9); }
.dpp-dots .dpp-dot.activo { width: 22px; background: var(--gold, #d9a150); }

/* al hacer zoom, los puntos no estorban */
#dpp-photo-zoomable.zoomeada .dpp-dots { opacity: 0; pointer-events: none; }

/* Móvil: solo puntitos (sin miniaturas ni flechas) */
@media (max-width: 779px){
  .dpp-media-card .dpp-thumbs { display: none !important; }
}

/* Puntitos DEBAJO de la foto (no superpuestos): siempre visibles, aunque la
   foto sea alta. Columna foto = foto + dots apilados. */
.dpp-photo-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.dpp-media-card .dpp-photo-col .dpp-photo-main { flex: 0 0 auto; width: 100%; }
.dpp-dots {
  position: static !important; inset: auto !important;
  padding: 2px 0; opacity: 1 !important; pointer-events: auto;
}
.dpp-dots .dpp-dot { background: rgba(20,17,13,.22); box-shadow: none; }
.dpp-dots .dpp-dot:hover { background: rgba(20,17,13,.45); }
.dpp-dots .dpp-dot.activo { background: var(--gold, #d9a150); }

/* ============================================================
   CARRUSEL DPP · la CARD mantiene su tamaño; sólo la foto desliza
   dentro (pedido de Andrés). Foto entera con object-fit:contain.
   ============================================================ */
/* PULPA · La caja de la foto principal va en 4:5, el formato vertical de
   Instagram, que es de donde viene casi todo el catálogo (2026-08-07).
   Antes era una altura fija de 600px: como el ancho depende de la pantalla,
   la caja quedaba más apaisada que las fotos y les abría franjas a los
   costados. Con 4:5 la foto de IG entra justa; lo que venga en otro formato
   se sigue viendo entero (contain) y el aire se completa con el color de
   fondo de la propia foto. */
.dpp-media-card .dpp-photo-main, #dpp-photo-zoomable {
  aspect-ratio: 4 / 5 !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
}
.dpp-media-card .dpp-photo-main img, #dpp-photo-zoomable img {
  width: 100% !important; height: 100% !important;
  object-fit: contain !important; object-position: center !important;
}
@media (max-width: 779px){
  .dpp-media-card .dpp-photo-main, #dpp-photo-zoomable {
    max-height: 72vh !important;
  }
}
/* sin resaltado / selección / arrastre nativo al deslizar (móvil) */
.dpp-photo-main, .dpp-photo-main img, .dpp-ghost {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
  -webkit-user-drag: none;
}
.dpp-photo-main { -webkit-touch-callout: none; }

/* FIX móvil: el input de "Sumate a la red" heredaba flex:1 y, al pasar el form
   a columna, se estiraba a lo alto (text box gigante). Alto natural. */
@media (max-width: 700px){
  .home-news-form input { flex: 0 0 auto !important; width: 100%; }
}

/* ============================================================
   CARRUSEL DPP · track (swipe que sigue el dedo, snap a la foto)
   La card ya tiene alto fijo; el track ocupa el 100% y desliza.
   ============================================================ */
.dpp-photo-main { overflow: hidden !important; }
.dpp-track { display: flex; width: 100%; height: 100%; will-change: transform; }
.dpp-track .dpp-slide { flex: 0 0 100%; width: 100%; height: 100%; }
.dpp-track .dpp-slide-img {
  width: 100% !important; height: 100% !important;
  object-fit: contain !important; object-position: center !important; display: block;
}

/* FIX móvil: el form de "Sumate a la red" tenía flex-basis 520px y en columna
   se estiraba a 520px de alto (pozo vacío debajo del botón). Alto natural. */
@media (max-width: 700px){
  .home-news-form { flex: 0 0 auto !important; }
}

/* FIX móvil DEFINITIVO · "Sumate a la red": nada de alto muerto.
   Fuerza alturas naturales en sección, form, input y botón. */
@media (max-width: 779px){
  .home-news { padding: 26px 0 !important; }
  .home-news-inner { flex-direction: column !important; align-items: stretch !important; gap: 16px !important; }
  .home-news-form {
    flex: 0 0 auto !important; flex-direction: column !important;
    max-width: 100% !important; gap: 10px !important;
    height: auto !important; min-height: 0 !important;
  }
  .home-news-form input { flex: 0 0 auto !important; width: 100% !important; height: auto !important; }
  .home-news-form .dpp-btn-primary { width: 100% !important; height: auto !important; }
}

/* FIX móvil DEFINITIVO · carrusel home: la regla con !important (línea ~2207)
   forzaba 4.5 cards por pantalla también en el celu → cards angostísimas,
   títulos cortados y "Ingresá para ver precio" partido. Cards grandes en móvil. */
@media (max-width: 900px){
  .home-carrusel .dpp-sim-card { flex: 0 0 calc((100% - 24px) / 2.2) !important; }
}
@media (max-width: 600px){
  .home-carrusel .dpp-sim-card { flex: 0 0 calc((100% - 20px) / 1.3) !important; }
  .home-carrusel .dpp-sim-titulo { font-size: 17px; -webkit-line-clamp: 2; }
}

/* Logo en el header (reemplaza el texto brand). Header claro → logo oscuro. */
.brand { text-decoration: none; }
.brand-logo { height: 68px; width: auto; display: block; }
@media (max-width: 779px){ .brand-logo { height: 48px; } }


/* Móvil: sacar "Inicio" del header (el logo ya lleva a la home). */
@media (max-width: 700px){
  .header-nav-cuenta .hdr-inicio { display: none; }
}

/* ============================================================
   BARRA INFERIOR MÓVIL (estilo app: íconos abajo, pestaña activa)
   Solo ≤700px. En desktop no aparece.
   ============================================================ */
.mobile-tabbar { display: none; }
@media (max-width: 700px){
  .mobile-tabbar {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    background: #fffdf9; border-top: 1px solid #e5dccd;
    box-shadow: 0 -2px 14px rgba(26,18,8,.10);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .mobile-tabbar .mtab {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    text-decoration: none; color: #8a7d6c;
    font: 600 10.5px/1 Roboto, "Helvetica Neue", Arial, sans-serif;
    padding: 4px 0 2px;
  }
  .mobile-tabbar .mtab svg { width: 23px; height: 23px; }
  .mobile-tabbar .mtab.activo { color: #8b3a2a; }
  .mobile-tabbar .mtab.activo svg { stroke: #8b3a2a; }
  /* que la barra no tape el contenido */
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
}

/* Móvil: sacar del header lo que ya está en la barra inferior (redundante).
   Quedan logo + buscador; el menú de cuenta se mantiene para usuarios logueados. */
@media (max-width: 700px){
  .header-nav-cuenta .hdr-inicio,
  .header-nav-cuenta .hdr-favs,
  .header-nav-cuenta .hdr-ingresar,
  .header-nav-cuenta .hdr-registro { display: none !important; }
}

/* Avatar en la barra inferior móvil (reemplaza el iconito de Cuenta) */
.mobile-tabbar .mtab-avatar {
  width: 25px; height: 25px; border-radius: 50%; object-fit: cover;
  border: 1px solid #d9cbb4; display: block;
}
.mobile-tabbar .mtab.activo .mtab-avatar { border-color: #8b3a2a; }

/* Móvil: sacar TODO el nav de cuenta del header (ya está en la barra de abajo) */
@media (max-width: 700px){
  .sticky-header .header-nav-cuenta { display: none !important; }
}

/* Barra inferior: alineación prolija de íconos y textos */
@media (max-width: 700px){
  .mobile-tabbar { align-items: stretch; }
  .mobile-tabbar .mtab {
    justify-content: flex-start; text-align: center; min-width: 0;
  }
  .mobile-tabbar .mtab svg,
  .mobile-tabbar .mtab .mtab-avatar {
    width: 24px; height: 24px; flex: none;
  }
  .mobile-tabbar .mtab span {
    width: 100%; text-align: center; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
  }
}

/* Móvil: sacar la tira superior ("El pasaporte digital…") — come alto al pedo. */
@media (max-width: 700px){
  .topstrip { display: none !important; }
}

/* "Últimos ingresos" (orden=recientes): sin panel de filtros → resultados a todo el ancho. */
.listado-layout.sin-filtros { grid-template-columns: 1fr !important; }

/* FIX móvil: unificar el margen lateral del header en TODAS las páginas.
   En la home ".home-carter .wrap" metía 30px y en el resto quedaba 0 (punta a
   punta). Con !important gana en ambos casos → mismo margen siempre. */
@media (max-width: 700px){
  .sticky-header .header-inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}


/* ============================================================
   EL LÁPIZ AL LADO DEL CORAZÓN (ficha)
   ------------------------------------------------------------
   Mismo tamaño y mismo peso visual que el corazón: son dos
   herramientas del mismo rango, no una principal y una secundaria.
   Gris hasta que se lo toca; recién ahí toma color.
   ============================================================ */
.dpp-acciones {
  display: flex; align-items: flex-start; gap: 6px; flex-shrink: 0;
}
.ficha-editar {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-top: 6px; flex-shrink: 0;
  color: #473b31; text-decoration: none;
  transition: color .15s ease, transform .15s ease;
}
.ficha-editar svg { width: 21px; height: 21px; display: block; }
.ficha-editar:hover { color: #c4503c; transform: scale(1.12); }

/* EL TILDE DE CUENTA VERIFICADA (11-08-2026)
   Va pegado al nombre, no en un renglon aparte: califica a quien es, no
   a la pieza. El tamano es el del texto y no mas: una insignia que grita
   parece comprada.

   CIRCULO LLENO Y TILDE BLANCO, como el de Instagram. Antes era un
   escudo dibujado con lineas: se veia bien y no se entendia. Esta forma
   no hay que explicarla en ningun lado del mundo, y una insignia que
   necesita leyenda no esta funcionando.

   El azul es el familiar, apenas bajado de brillo: el de Instagram puro
   contra este crema grita mas que el nombre al que califica. */
.custodio-tilde {
  display: inline-flex; align-items: center; vertical-align: -3px;
  margin-left: 5px; color: #1a86e0; flex: none;
}
/* El del custodio anonimo es el mismo dibujo y el mismo azul: es la
   misma cosa dicha en dos lugares. */
.custodio-escudo { color: #1a86e0; }


/* ── El menu de la cuenta, uno por renglon ───────────────────────────
   Con la piel «archivo» apagada el contenedor se llama
   .hdr-cuenta-menu; con ella prendida, .ar-cuenta-menu. Las dos
   existen, en pieles distintas, asi que las dos se nombran. El motivo
   completo esta escrito en pulpa_archivo.css, al lado de la regla que
   causaba la fuga. */
.ar-cuenta-menu a,
.hdr-cuenta-menu a {
  display: block !important;
  width: auto !important;
  float: none !important;
  white-space: nowrap !important;
  padding: 9px 18px !important;
  line-height: 1.35 !important;
}
.ar-cuenta-menu, .hdr-cuenta-menu { min-width: 210px !important; }