/* ============================================================
   Ficha de producto. Toma el lenguaje del modal de la pagina de
   spray (lista de ventajas, fila de colores) pero como pagina
   completa, sobre fondo blanco: solo el menú y el pie van en negro.
   ============================================================ */

.ficha-migas .breadcrumb .actual{color:var(--ink)}

.ficha{
  background:#fff;color:var(--ink);
  margin:0;
}
.ficha-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:0;
  align-items:stretch;
}

/* --------------------------------------------------------- imagen */
/* El cuadro tiene alto fijo y la foto lo llena: una chica se agranda y una
   grande se achica, siempre entera y sin deformarse. Las miniaturas van
   debajo, en una sola fila que se desliza. */
.ficha-vis{
  position:relative;
  height:clamp(460px,44vw,600px);
  display:flex;flex-direction:column;gap:1rem;
  padding:2.2rem 2.2rem 1.4rem;
  background:var(--fondo,#1a1b1e);
  border-radius:20px;
  margin:2.5rem 2rem 2.5rem 0;
  overflow:hidden;
}
/* Columna de la foto: el cuadro y, debajo, los botones de redes */
.ficha-izq{display:flex;flex-direction:column;margin:2.5rem 2rem 2.5rem 0}
.ficha-izq .ficha-vis{margin:0}
.ficha-redes{display:flex;justify-content:center;gap:.7rem;margin-top:1.2rem}
.ficha-redes:empty{display:none}
.ficha-redes a{
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;
  color:#fff;background:#000;
  transition:background .2s ease,transform .2s ease,box-shadow .2s ease;
}
.ficha-redes a:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.25)}
.ficha-redes a:focus-visible{outline:2px solid #000;outline-offset:2px}

.ficha-escenario{
  position:relative;flex:1;min-height:0;
  display:grid;place-items:center;
}
.ficha-escenario img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;
  filter:drop-shadow(0 24px 48px rgba(0,0,0,.45));
}
.ficha-sinfoto{
  opacity:.26;color:#fff;transform:scale(5);
}
.ficha-badge{
  position:absolute;top:20px;left:20px;
  background:#fff;color:#0d0d0f;
  font-size:.72rem;font-weight:800;
  padding:.35rem .8rem;border-radius:999px;
  letter-spacing:.04em;
}

/* miniaturas: una fila con flechas a los lados */
.ficha-tira{
  flex:0 0 auto;
  display:flex;align-items:center;gap:.4rem;
}
.ficha-galeria{
  flex:1;min-width:0;
  display:flex;gap:.5rem;flex-wrap:nowrap;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:4px 2px;
  scrollbar-width:none;
}
.ficha-galeria::-webkit-scrollbar{display:none}
/* Si caben todas, quedan centradas */
.ficha-galeria::before,.ficha-galeria::after{content:'';margin:auto}
.ficha-mini{
  flex:0 0 58px;height:58px;padding:4px;
  scroll-snap-align:start;
  border:2px solid rgba(255,255,255,.3);border-radius:10px;
  background:rgba(255,255,255,.08);cursor:pointer;overflow:hidden;
  transition:border-color .18s ease,background .18s ease;
}
.ficha-mini img{width:100%;height:100%;object-fit:contain}
.ficha-mini:hover{border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.14)}
.ficha-mini.on{border-color:#fff;background:rgba(255,255,255,.18)}
.ficha-mini:focus-visible{outline:2px solid #fff;outline-offset:2px}

.ficha-flecha{
  flex:0 0 34px;height:34px;padding:0;
  display:grid;place-items:center;
  border:0;border-radius:50%;
  background:rgba(255,255,255,.16);color:#fff;cursor:pointer;
  transition:background .18s ease,opacity .18s ease;
}
.ficha-flecha:hover{background:rgba(255,255,255,.3)}
.ficha-flecha:disabled{opacity:.25;cursor:default}
.ficha-flecha[hidden]{display:none}

/* Con foto, el cuadro va en blanco y los controles se oscurecen para
   seguir viéndose. */
.ficha-vis.ficha-blanca{background:#fff;border:1px solid var(--line)}
.ficha-blanca .ficha-escenario img{filter:drop-shadow(0 16px 28px rgba(0,0,0,.14))}
.ficha-blanca .ficha-badge{background:#000;color:#fff}
.ficha-blanca .ficha-mini{border-color:rgba(0,0,0,.14);background:#fff}
.ficha-blanca .ficha-mini:hover{border-color:rgba(0,0,0,.4);background:#fff}
.ficha-blanca .ficha-mini.on{border-color:#0d0d0f;background:#fff}
.ficha-blanca .ficha-mini:focus-visible{outline-color:#0d0d0f}
.ficha-blanca .ficha-flecha{background:rgba(0,0,0,.07);color:#0d0d0f}
.ficha-blanca .ficha-flecha:hover{background:rgba(0,0,0,.14)}

/* --------------------------------------------------------- textos */
.ficha-txt{
  padding:3.2rem 0 3.2rem 1rem;
  display:flex;flex-direction:column;justify-content:center;
}
.ficha-tag{
  display:inline-block;align-self:flex-start;
  font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);
  border:1px solid var(--line-strong);
  padding:.3rem .7rem;border-radius:999px;
  margin-bottom:1.1rem;
}
.ficha-txt h1{
  font-size:clamp(2rem,4vw,2.9rem);
  color:var(--ink);margin-bottom:.6rem;
}
.ficha-gancho{
  font-size:1.1rem;font-weight:700;
  color:var(--ink);margin-bottom:1rem;
}
.ficha-desc{
  color:var(--ink-soft);
  line-height:1.75;margin-bottom:1.7rem;
}

.ficha-feat{
  list-style:none;display:flex;flex-direction:column;gap:.7rem;
  margin:0 0 1.8rem;padding:0;
}
.ficha-feat li{
  display:flex;gap:.7rem;align-items:flex-start;
  color:var(--ink);font-size:.95rem;
}
.ficha-feat .ck{
  flex:0 0 20px;height:20px;margin-top:.15rem;
  display:grid;place-items:center;
  background:#000;color:#fff;border-radius:50%;
}

.ficha-colores{margin-bottom:1.9rem}
.ficha-rotulo{
  display:block;
  font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.7rem;
}
.ficha-muestras{display:flex;gap:.6rem;flex-wrap:wrap}
.ficha-color{
  display:inline-flex;align-items:center;gap:.45rem;
  background:var(--bg-soft);
  border:1px solid var(--line);
  padding:.35rem .75rem .35rem .4rem;border-radius:999px;
  font-size:.82rem;color:var(--ink);
}
.ficha-color i{
  width:18px;height:18px;border-radius:50%;
  border:1px solid rgba(0,0,0,.2);display:block;
}

.ficha-acts{display:flex;gap:.8rem;flex-wrap:wrap}
/* Botón secundario de la ficha: contorno negro sobre el fondo blanco */
.btn-outline-dark{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-outline-dark:hover{border-color:var(--ink);transform:translateY(-2px)}

/* ------------------------------------------------------- detalle */
/* Lo que sigue a la ficha (el detalle o, si no hay, los relacionados) va
   pegado a ella: el espacio ya lo da la propia ficha. El !important gana
   al padding-top:0 en línea de los relacionados. */
.ficha + section.block{padding-top:1.5rem !important}
.detalle-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2.6rem 3rem;
  align-items:start;
}
.detalle-grid h2{
  font-size:1.4rem;
  margin:0 0 1rem;
}
.detalle-grid h2:not(:first-child){margin-top:2.4rem}

/* Cada bloque va a su celda: así Formatos y Características parten a la
   misma altura aunque la descripción sea más larga que las descargas. */
.detalle-grid .d-izq{grid-column:1}
.detalle-grid .d-der{grid-column:2}
.detalle-grid .d-arriba{grid-row:1}
.detalle-grid.con-arriba .d-abajo{grid-row:2}
.detalle-grid:not(.con-arriba) .d-abajo{grid-row:1}
/* Si un lado no tiene nada, el otro ocupa todo el ancho, uno debajo del otro */
.detalle-grid.una-col{grid-template-columns:minmax(0,1fr)}
.detalle-grid.una-col > *{grid-column:1;grid-row:auto}

/* Más de 5 formatos: se ven los primeros y el resto se despliega */
.detalle-tabla.plegada tbody tr:nth-child(n+6){display:none}
.detalle-mas{
  display:inline-flex;align-items:center;gap:.4rem;
  margin-top:.8rem;padding:.5rem .9rem;
  border:1px solid var(--line);border-radius:999px;background:#fff;
  font:inherit;font-size:.86rem;font-weight:700;color:var(--ink);cursor:pointer;
  transition:border-color .18s ease;
}
.detalle-mas:hover{border-color:var(--ink)}
.detalle-mas:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.detalle-mas svg{transition:transform .2s ease}
.detalle-mas[aria-expanded="true"] svg{transform:rotate(180deg)}
.detalle-mas[hidden]{display:none}
.detalle-larga{color:var(--ink-soft);line-height:1.8}

.detalle-tabla{
  width:100%;border-collapse:collapse;font-size:.94rem;
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
}
.detalle-tabla th{
  text-align:left;padding:.7rem 1rem;background:var(--bg-soft);
  font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);border-bottom:1px solid var(--line);
}
.detalle-tabla td{padding:.8rem 1rem;border-bottom:1px solid var(--line)}
.detalle-tabla tr:last-child td{border-bottom:none}

/* descargas */
.detalle-docs .doc{
  display:flex;align-items:center;gap:.9rem;
  padding:.9rem 1rem;margin-bottom:.7rem;
  border:1px solid var(--line);border-radius:12px;
  background:#fff;transition:.18s ease;
}
.detalle-docs .doc:hover{
  border-color:var(--ink);transform:translateY(-2px);
  box-shadow:var(--shadow-sm);
}
.doc-ext{
  flex:0 0 44px;height:44px;
  display:grid;place-items:center;
  background:var(--ink);color:#fff;border-radius:9px;
  font-size:.62rem;font-weight:800;letter-spacing:.04em;
}
.doc-txt{flex:1;display:flex;flex-direction:column;line-height:1.35;min-width:0}
.doc-txt strong{font-size:.92rem}
.doc-txt small{color:var(--muted);font-size:.79rem;margin-top:.15rem}

/* ---------------------------------------------------- responsive */
@media (max-width:900px){
  /* minmax(0,…): sin esto la fila de miniaturas ensancha la columna y la
     página se desborda hacia el lado en el celular. */
  .ficha-grid{grid-template-columns:minmax(0,1fr)}
  .ficha-izq{margin:1.5rem 0 0}
  .ficha-vis{
    margin:0;height:clamp(360px,100vw,480px);
    padding:1.6rem 1.2rem 1.1rem;
  }
  .ficha-mini{flex-basis:52px;height:52px}
  .ficha-txt{padding:2rem 0 2.6rem}
  .detalle-grid{grid-template-columns:1fr;gap:2.2rem}
  .detalle-grid > *{grid-column:1 !important;grid-row:auto !important}
}