/* ============================================================
   PROMO BAGS — Catálogo A DETALLE (Bloque 2) · fichas por modelo
   Sobre crema. Cada ficha: media (visor 3D o render) + info (colores,
   medidas, usos, escalera de precios propia, CTA WA, impresa real).
   Reutiliza tokens-v1 + catalogo-v1 (chips/eyebrow/accent en crema).
   Mobile-first, anti-slop: nada de grid frío; personalidad por modelo.
   ============================================================ */

/* ---------- índice de modelos (chips que saltan a cada ficha) ---------- */
.modelos-index {
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
  margin: clamp(1.4rem, 1rem + 2vw, 2.4rem) auto 0; max-width: 760px;
}
/* el índice vive sobre el page-hero OSCURO -> texto claro, no verde-bosque */
.modelos-index a {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 700; font-size: .9rem; color: var(--texto);
  background: rgba(244,241,232,.07); border: 1px solid var(--panel-borde);
  padding: .45rem .9rem; border-radius: var(--r-pill);
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.modelos-index a:hover {
  background: rgba(162,237,85,.15); border-color: rgba(162,237,85,.42);
  color: var(--verde-vibrante); transform: translateY(-2px);
}

/* ---------- lista de fichas ---------- */
.fichas { display: flex; flex-direction: column; gap: clamp(2.4rem,1.4rem+4vw,4.5rem); margin-top: clamp(2rem,1rem+3vw,3.4rem); }

.ficha {
  scroll-margin-top: 90px;
  display: grid; grid-template-columns: 1fr; gap: clamp(1.3rem,1rem+2vw,2.4rem);
  align-items: start;
}
@media (min-width: 860px) {
  .ficha { grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: clamp(2rem,1rem+3vw,3.4rem); }
  /* alterna el lado de la media en desktop para ritmo editorial */
  .ficha:nth-child(even) .ficha__media { order: 2; }
}

/* ---------- MEDIA: visor 3D o render, halo suave detrás ---------- */
.ficha__media { position: relative; }
.ficha__stage {
  position: relative; aspect-ratio: 1/1; border-radius: var(--r-xl);
  background:
    radial-gradient(circle at 50% 42%, rgba(125,192,93,.16), transparent 62%),
    #F7F5EE;
  border: 1px solid var(--linea-crema);
  box-shadow: 0 14px 40px rgba(35,48,43,.10);
  overflow: hidden;
}
/* C2 — BLANCO-SOBRE-BLANCO: las bolsas marfil/blancas se pierden sobre el crema.
   Tratamiento HORNEADO en la propia imagen (web/build/gen_lightsafe.py): contorno
   greige + sombra de contacto que recortan la silueta sin tocar las asas. El chip
   blanco apunta a assets/catalogo/lightsafe/*. */
/* P2-1.2 — FONDO ADAPTATIVO para colores CLAROS (blanco/beige/amarillo):
   sobre el crema del stage la bolsa clara no se recorta. Cuando el color activo
   es claro (chip con data-light), el JS añade --darkbg: el fondo baja un paso a
   greige oscuro + halo neutro + sombra de contacto -> la silueta se recorta obvia.
   Se VERIFICA mirando la página viva tras el swap (regla QC E5-P2-b). */
.ficha__stage--darkbg {
  background:
    radial-gradient(circle at 50% 46%, rgba(35,48,43,.10), transparent 60%),
    linear-gradient(180deg, #C9C3B4 0%, #BDB6A6 100%);
  border-color: #ADA593;
}
.ficha__stage--darkbg > .stage__img {
  filter: drop-shadow(0 18px 26px rgba(35,48,43,.34)) drop-shadow(0 2px 6px rgba(35,48,43,.22));
}
/* el atributo hidden SIEMPRE gana (varias reglas fijan display) */
.ficha__stage [hidden] { display: none !important; }
.ficha__stage > .stage__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ficha__stage .stage__mv { position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; --poster-color: transparent; }

/* botón real que activa el 3D (feedback + cursor pointer) */
.stage__activate {
  position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 4;
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: .92rem; letter-spacing: -.01em;
  color: var(--crema); background: rgba(35,48,43,.82); backdrop-filter: blur(8px);
  border: 1px solid rgba(244,241,232,.22); border-radius: var(--r-pill);
  padding: .62rem 1.1rem; min-height: 44px;
  box-shadow: 0 8px 22px rgba(35,48,43,.28);
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.stage__activate:hover { transform: translateX(-50%) translateY(-2px); background: var(--verde-bosque); }
.stage__activate svg { width: 1.15em; height: 1.15em; color: var(--verde-vibrante); }

/* estado de carga del 3D */
.stage__spin {
  position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; gap: .6rem;
  color: var(--tinta); font-weight: 600; font-size: .9rem; background: rgba(247,245,238,.7); backdrop-filter: blur(2px);
}
.spinner {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  border: 3px solid rgba(35,48,43,.18); border-top-color: var(--verde-bosque);
  animation: pb-spin .8s linear infinite;
}
@keyframes pb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .spinner { animation-duration: 2s; } }

/* pastilla de estado del visor 3D */
.ficha__3dtag {
  position: absolute; top: .8rem; left: .8rem; z-index: 3;
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .72rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  padding: .3rem .65rem; border-radius: var(--r-pill);
  backdrop-filter: blur(6px);
}
.ficha__3dtag--live { color: var(--verde-bosque); background: rgba(162,237,85,.9); }
.ficha__3dtag--soon { color: var(--crema); background: rgba(35,48,43,.72); }
.ficha__3dtag svg { width: 1em; height: 1em; }

/* placeholder elegante para modelos cuyo visor aún no llega */
.ficha__stage--soon::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(125,192,93,.08) 50%, transparent 60%);
}

/* swatches de imagen (donde hay render real del color) */
.ficha__swatches { position: absolute; left: .9rem; bottom: .9rem; display: flex; gap: .45rem; z-index: 3; }

/* ---------- INFO ---------- */
.ficha__info { display: flex; flex-direction: column; gap: 1rem; }
.ficha__head { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.ficha__head h2 { color: var(--tinta); font-size: clamp(1.9rem,1.4rem+2vw,2.8rem); }
.ficha__tag {
  font-size: .72rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  color: var(--verde-bosque); background: rgba(125,192,93,.18);
  padding: .26rem .62rem; border-radius: var(--r-pill); white-space: nowrap;
}
.ficha__tag--premium { color: #7a5a12; background: rgba(224,178,74,.22); }
.ficha__use { color: var(--tinta-tenue); font-size: var(--t-lead); max-width: 44ch; }

/* specs en línea (medidas, área, asa, tela) */
.ficha__specs { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .55rem; }
.ficha__specs li {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .86rem; background: #EFEBDE; border: 1px solid var(--linea-crema);
  padding: .48rem .8rem; border-radius: var(--r-md);
}
.ficha__specs svg { width: 1.05em; height: 1.05em; color: var(--verde-bosque); flex: none; }
.ficha__specs .spec__k { color: var(--tinta-tenue); font-weight: 600; }
.ficha__specs .spec__v { color: var(--tinta); font-weight: 700; }

/* ---------- COLORES ---------- */
.ficha__colors { margin-top: .2rem; }
.colors__label {
  display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; flex-wrap: wrap;
  font-size: .8rem; font-weight: 700; color: var(--tinta); text-transform: uppercase; letter-spacing: .03em;
}
.colors__count { color: var(--tinta-tenue); font-weight: 600; text-transform: none; letter-spacing: 0; }
.colors__note { font-size: .8rem; color: var(--tinta-tenue); font-style: italic; font-weight: 500; text-transform: none; letter-spacing: 0; }
.chips-color { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .7rem; }
.chip-color {
  display: inline-flex; align-items: center; gap: .42rem;
  font-size: .8rem; font-weight: 600; color: var(--tinta);
  background: #F7F5EE; border: 1px solid var(--linea-crema);
  padding: .3rem .6rem .3rem .42rem; border-radius: var(--r-pill);
}
.chip-color .dot {
  width: 15px; height: 15px; border-radius: 50%; flex: none;
  box-shadow: inset 0 0 0 1px rgba(35,48,43,.18);
}
/* C2 — dot casi-blanco (blanco/amarillo): borde reforzado para verse sobre crema */
.chip-color .dot--light { box-shadow: inset 0 0 0 1px rgba(35,48,43,.45); }
/* chip interactivo (cambia la foto) */
button.chip-color { cursor: pointer; min-height: 40px; transition: border-color .2s var(--ease), transform .2s var(--ease), background .2s var(--ease); }
button.chip-color:hover { transform: translateY(-1px); background: #fff; }
button.chip-color[aria-pressed="true"] { border-color: var(--verde-bosque); background: rgba(125,192,93,.16); box-shadow: 0 0 0 1px var(--verde-bosque) inset; }
button.chip-color .dot { box-shadow: inset 0 0 0 1px rgba(35,48,43,.18); }
button.chip-color:focus-visible { outline: 2px solid var(--verde-bosque); outline-offset: 2px; }
/* P2-1.1 — TODOS los chips son botones reales, se ven IGUAL. Los que no tienen
   render fiable (blanco/beige/amarillo de algunos modelos) al tocarse muestran
   el mensaje elegante de abajo; ya NO hay cursor de ayuda ni apariencia rota. */
.colors__msg:not([hidden]) {
  margin-top: .6rem; font-size: .82rem; line-height: 1.4; color: var(--verde-bosque);
  font-weight: 600; display: flex; align-items: flex-start; gap: .4rem;
  background: rgba(125,192,93,.12); border: 1px solid rgba(125,192,93,.32);
  border-radius: var(--r-sm); padding: .5rem .7rem;
}
.colors__msg::before {
  content: ""; flex: none; width: 16px; height: 16px; margin-top: 1px;
  background: var(--verde-bosque);
  -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 16v-5M12 8h.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 16v-5M12 8h.01'/%3E%3C/svg%3E");
}

/* ---------- ESCALERA DE PRECIOS (compacta, sobre crema) ---------- */
.ficha__price { margin-top: .3rem; }
.price-lead { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.price-lead b { font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; color: var(--tinta); }
.price-lead span { font-size: .82rem; color: var(--tinta-tenue); }
.price-steps {
  display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem;
}
.pstep {
  display: flex; flex-direction: column; gap: .05rem; align-items: center; justify-content: center;
  min-width: 74px; flex: 1 1 74px; min-height: 48px;   /* C7: tap target ≥44px */
  background: #F7F5EE; border: 1px solid var(--linea-crema);
  border-radius: var(--r-sm); padding: .5rem .3rem;
  /* C7: escalón clickeable = botón real de WhatsApp (modelo + cantidad) */
  cursor: pointer; text-decoration: none; position: relative;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
  -webkit-tap-highlight-color: transparent;
}
.pstep b { font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: var(--tinta); }
.pstep span { font-size: .68rem; color: var(--tinta-tenue); font-weight: 600; }
/* afford: hover/focus levantan el escalón y lo tiñen del verde de marca */
.pstep:hover { transform: translateY(-2px); border-color: var(--verde-vibrante);
  box-shadow: 0 6px 16px -8px rgba(0,0,0,.28); background: #fff; }
.pstep:focus-visible { outline: 3px solid var(--verde-vibrante); outline-offset: 2px; }
.pstep:active { transform: translateY(0); }
.pstep--star:hover { background: var(--verde-bosque); filter: brightness(1.08); }
.pstep--star { background: var(--verde-bosque); border-color: var(--verde-bosque); }
.pstep--star b { color: var(--verde-vibrante); }
.pstep--star span { color: rgba(244,241,232,.85); }
.pstep__flag {
  display: block; font-size: .56rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  color: var(--verde-vibrante);
}
.price-foot { font-size: .78rem; color: var(--tinta-tenue); margin-top: .55rem; }
.price-foot b { color: var(--tinta); }

/* ---------- CTA + impresa ---------- */
.ficha__cta { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: .3rem; }
.ficha__impresa {
  display: flex; align-items: center; gap: .9rem; margin: .9rem 0 0;
  padding: .7rem; background: #EFEBDE; border: 1px solid var(--linea-crema); border-radius: var(--r-md);
}
.ficha__impresa img { width: 74px; height: 74px; object-fit: cover; border-radius: var(--r-sm); flex: none; }
.ficha__impresa figcaption { font-size: .82rem; color: var(--tinta-tenue); display: flex; flex-direction: column; gap: .1rem; }
.impresa__eyebrow {
  font-size: .66rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--verde-bosque);
}
.ficha__impresa b { color: var(--tinta); font-size: .95rem; }

/* ---------- cierre: nota + CTA a bot ---------- */
.catalogo-cierre { text-align: center; max-width: 60ch; margin: clamp(2.6rem, 1.6rem + 4vw, 4.5rem) auto 0; }
.catalogo-cierre p { color: var(--tinta-tenue); margin-top: .8rem; }
.catalogo-cierre .cta { margin-top: 1.4rem; }

@media (max-width: 400px) {
  .pstep { min-width: 60px; flex-basis: 60px; }
  .pstep b { font-size: .9rem; }
}

/* ============================================================
   P2 — Revisión de diseño (Katherine)
   ============================================================ */
/* 2.13 — AIREAR la columna de información: más respiro entre bloques */
.ficha__info { gap: clamp(1.25rem,.9rem+1.1vw,1.9rem); }
.ficha__specs { gap: .7rem; margin-top: .1rem; }
.ficha__colors { margin-top: .35rem; }
.ficha__price { margin-top: .5rem; }
.chips-color { margin-top: .9rem; }
/* 2.13 — tarjeta "Un cliente con su X" integrada con aire */
.ficha__impresa { margin-top: 1.1rem; padding: .7rem .8rem; background: #F7F5EE;
  border: 1px solid var(--linea-crema); border-radius: var(--r-md); gap: .9rem; }
/* 2.5 — escalones de precio con un respiro más */
.price-steps { gap: .5rem; margin-top: .9rem; }
/* 2.5 — pie "¿Cuál es la tuya?" centrado (el eyebrow quedaba a la izquierda) */
.catalogo-cierre .eyebrow { justify-content: center; }