/* Ficha de producto (estilo landing, 3 secciones). Complementa css/styles.css;
   solo estilos de la plantilla nueva. Celular primero. */

/* ---------- Sección 1: etiquetas de condición y tipo ---------- */
.ficha-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 6px; }
.ficha-etiquetas .ficha-badge-condicion { margin: 0; }
.ficha-condicion {
  display: inline-block; font-size: 12px; font-weight: 700; border-radius: 20px; padding: 3px 11px;
  border: 1px solid var(--azul-corporativo); color: var(--azul-corporativo); background: var(--blanco);
}
.ficha-condicion-otro { background: var(--azul-marino); border-color: var(--azul-marino); color: var(--blanco); }

/* Resumen rápido debajo del precio: "Compatible con impresoras" (consumibles)
   y 2 o 3 datos reales cortos de las especificaciones. */
.ficha-resumen-rapido { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.ficha-resumen-rapido li { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; color: var(--gris-texto); }
.ficha-resumen-rapido li::before { content: "✓"; color: var(--verde-acento); font-weight: 800; flex-shrink: 0; }
.ficha-resumen-rapido strong { color: var(--azul-oscuro); }

/* ---------- Sección 2: detalles ---------- */
.ficha-texto-principal { font-size: 15.5px; line-height: 1.6; color: var(--gris-texto); margin: 0 0 12px; }
.ficha-descripcion-completa { margin: 0 0 16px; }
.ficha-descripcion-completa summary { cursor: pointer; font-weight: 600; color: var(--azul-corporativo); min-height: 32px; }
.ficha-descripcion-completa p { color: var(--gris-texto); line-height: 1.6; }
.ficha-caracteristicas { margin: 0 0 16px; padding-left: 18px; line-height: 1.6; color: var(--gris-texto); }
.ficha-caracteristicas li { margin-bottom: 4px; }
.ficha-garantia {
  display: flex; gap: 10px; align-items: flex-start; margin: 8px 0 0; padding: 14px 16px;
  background: var(--azul-muy-claro); border: 1px solid #cfe9fb; border-radius: 10px;
}
.ficha-garantia svg { width: 22px; height: 22px; color: var(--azul-corporativo); flex-shrink: 0; margin-top: 1px; }
.ficha-garantia p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--azul-marino); }
.ficha-garantia a { color: var(--azul-corporativo); font-weight: 600; }

.ficha-faq { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--gris-borde); }
.ficha-faq-item { border-bottom: 1px solid var(--gris-borde); }
.ficha-faq-item summary {
  cursor: pointer; list-style: none; padding: 13px 28px 13px 0; font-weight: 600; color: var(--azul-oscuro);
  position: relative; min-height: 44px; box-sizing: border-box;
}
.ficha-faq-item summary::-webkit-details-marker { display: none; }
.ficha-faq-item summary::after { content: "+"; position: absolute; right: 4px; top: 10px; font-size: 20px; color: var(--azul-corporativo); }
.ficha-faq-item[open] summary::after { content: "−"; }
.ficha-faq-item p { margin: 0 0 14px; line-height: 1.55; color: var(--gris-texto); }

/* ---------- Sección 3: opiniones ---------- */
.ficha-opiniones {
  background: var(--blanco); border: 1px solid var(--gris-borde); border-radius: 12px; padding: 22px; margin: 0 0 22px;
}
.ficha-opiniones h2 { font-size: 19px; color: var(--azul-oscuro); margin: 0 0 8px; }
.opiniones-resumen { margin: 0 0 14px; color: var(--gris-texto); }
.opinion-estrellas { color: #b7791f; letter-spacing: 1px; }
.opinion-estrellas-vacias { color: var(--gris-borde); }
.opiniones-lista { list-style: none; margin: 0 0 14px; padding: 0; }
.opinion { padding: 12px 0; border-top: 1px solid var(--gris-borde); }
.opinion-cabecera { margin: 0 0 6px; font-size: 14px; color: var(--gris-suave); }
.opinion-cabecera strong { color: var(--gris-texto); }
.opinion-comentario { margin: 0; line-height: 1.55; color: var(--gris-texto); white-space: pre-line; }
.opinion-foto { margin-top: 8px; border-radius: 8px; object-fit: cover; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Sin opiniones aprobadas: solo un botón discreto, sin sección ni título. */
.ficha-escribir-opinion { margin: 0 0 22px; }
.btn-escribir-opinion {
  background: none; border: 1px solid var(--gris-borde); border-radius: 8px; padding: 10px 16px; min-height: 44px;
  font-size: 14px; font-weight: 600; color: var(--azul-corporativo); cursor: pointer;
}
.btn-escribir-opinion:hover { border-color: var(--azul-corporativo); }

.form-opinion {
  margin-top: 14px; padding: 18px; border: 1px solid var(--gris-borde); border-radius: 12px; background: var(--blanco);
  display: grid; gap: 12px; max-width: 640px;
}
.form-opinion h3 { margin: 0; font-size: 17px; color: var(--azul-oscuro); }
.form-opinion-nota { margin: 0; font-size: 13px; color: var(--gris-suave); line-height: 1.5; }
.form-opinion label { display: grid; gap: 4px; font-size: 14px; font-weight: 600; color: var(--gris-texto); }
.form-opinion input[type=text], .form-opinion textarea {
  font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid var(--gris-borde); border-radius: 8px; min-height: 44px; box-sizing: border-box;
}
.form-opinion-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-opinion-calificacion { border: 1px solid var(--gris-borde); border-radius: 8px; padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.form-opinion-calificacion legend { font-size: 14px; font-weight: 600; padding: 0 4px; }
.form-opinion-calificacion label { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; min-height: 32px; }
.form-opinion-autorizacion { display: flex !important; align-items: flex-start; gap: 8px; font-weight: 400 !important; line-height: 1.45; }
.form-opinion-autorizacion input { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; }
.form-opinion-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-opinion button[type=submit] { justify-self: start; }
.form-opinion-mensaje { margin: 0; font-weight: 600; color: var(--verde-oscuro); }
.form-opinion-mensaje.form-opinion-error { color: var(--rojo); }

/* ---------- Celular primero (375 px): foto compacta arriba (40% de la pantalla,
   con el espacio reservado), luego categoría, nombre y precio; "Comprar ahora"
   siempre visible en la barra fija. ---------- */
@media (max-width: 767px) {
  .seccion-ficha .ficha-panel { display: flex; flex-direction: column; gap: 10px; }
  .seccion-ficha .ficha-galeria { order: 1; }
  .seccion-ficha .ficha-info { order: 2; }
  .seccion-ficha .ficha-compra { order: 3; }
  .seccion-ficha .ficha-imagen-wrap { height: 40vh; aspect-ratio: auto; max-width: none; width: 100%; margin: 0 auto; }
  .seccion-ficha .ficha-imagen-principal { width: 100%; height: 100%; max-height: none; object-fit: contain; }
  /* Con una sola foto, la tira de miniaturas no aporta: se oculta. */
  .seccion-ficha .ficha-miniaturas:has(> .ficha-mini-btn:only-child) { display: none; }
  .seccion-ficha .ficha-info .producto-categoria { margin-top: 2px; }
  .seccion-ficha .ficha-etiquetas { margin: 2px 0 4px; }
  .seccion-ficha .ficha-info h1 { font-size: 20px; margin: 2px 0; }
  .seccion-ficha .ficha-precio { font-size: 26px; margin: 2px 0; }
  .seccion-ficha .ficha-sku { margin-bottom: 2px; }
  /* Margen a la derecha: la burbuja "¿Dudas?" (círculo de 48 px) no tapa el texto. */
  .ficha-resumen-rapido { margin-top: 6px; gap: 4px; padding-right: 52px; }
  .ficha-resumen-rapido li { font-size: 13.5px; }
  .form-opinion-fila { grid-template-columns: 1fr; }
  .ficha-opiniones { padding: 16px; }
}

/* ---------- "Compra con confianza" (debajo de los botones de compra) ---------- */
.ficha-confianza { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--gris-borde); }
.ficha-confianza-titulo { margin: 0 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; color: var(--azul-marino); }
.ficha-confianza .ficha-badges-confianza { margin: 0; padding: 0; border-top: 0; }
.ficha-confianza .ficha-badges-confianza a { color: var(--azul-corporativo); font-weight: 600; }
.ficha-confianza .sello-resenas { margin-top: 10px; }
.ficha-despues-pagar { margin-top: 10px; border: 1px solid var(--gris-borde); border-radius: 10px; background: var(--blanco); }
.ficha-despues-pagar summary {
  cursor: pointer; list-style: none; padding: 11px 34px 11px 12px; font-size: 13.5px; font-weight: 700; color: var(--azul-oscuro);
  position: relative; min-height: 44px; box-sizing: border-box;
}
.ficha-despues-pagar summary::-webkit-details-marker { display: none; }
.ficha-despues-pagar summary::after { content: "+"; position: absolute; right: 12px; top: 9px; font-size: 18px; color: var(--azul-corporativo); }
.ficha-despues-pagar[open] summary::after { content: "−"; }
.ficha-despues-pagar ol { margin: 0; padding: 0 14px 12px 32px; font-size: 13px; line-height: 1.5; color: var(--gris-texto); }
.ficha-despues-pagar li { margin-bottom: 4px; }
.ficha-despues-pagar a { color: var(--azul-corporativo); font-weight: 600; }